当前位置：首页 > VUE

vue实现pdf水印

2026-02-18 14:08:19VUE

实现思路

在Vue中实现PDF水印通常涉及两种方式：前端生成水印后叠加到PDF上，或后端处理PDF文件添加水印。以下是两种方案的实现方法。

前端方案（基于PDF.js）

使用PDF.js库渲染PDF，通过Canvas叠加水印层。

安装依赖：

npm install pdfjs-dist

示例代码：

<template>
  <div class="pdf-container">
    <canvas ref="pdfCanvas"></canvas>
    <canvas ref="watermarkCanvas" class="watermark-layer"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'

export default {
  props: ['pdfUrl'],
  mounted() {
    this.renderPdf()
  },
  methods: {
    async renderPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)

      const viewport = page.getViewport({ scale: 1.5 })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')

      canvas.height = viewport.height
      canvas.width = viewport.width

      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise

      this.addWatermark()
    },

    addWatermark() {
      const canvas = this.$refs.watermarkCanvas
      const pdfCanvas = this.$refs.pdfCanvas
      canvas.width = pdfCanvas.width
      canvas.height = pdfCanvas.height

      const ctx = canvas.getContext('2d')
      ctx.font = '20px Arial'
      ctx.fillStyle = 'rgba(200, 200, 200, 0.5)'
      ctx.rotate(-0.785)

      for (let x = 0; x < canvas.width; x += 200) {
        for (let y = 0; y < canvas.height; y += 100) {
          ctx.fillText('CONFIDENTIAL', x, y)
        }
      }
    }
  }
}
</script>

<style>
.pdf-container {
  position: relative;
}
.watermark-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
</style>

后端方案（Node.js）

使用pdf-lib等库处理PDF文件。

安装依赖：

npm install pdf-lib

示例代码：

const { PDFDocument, rgb } = require('pdf-lib')
const fs = require('fs')

async function addWatermark(inputPath, outputPath) {
  const pdfBytes = fs.readFileSync(inputPath)
  const pdfDoc = await PDFDocument.load(pdfBytes)

  const pages = pdfDoc.getPages()
  pages.forEach(page => {
    const { width, height } = page.getSize()
    page.drawText('CONFIDENTIAL', {
      x: width / 2,
      y: height / 2,
      size: 50,
      opacity: 0.5,
      rotate: Math.PI / -4,
      color: rgb(0.9, 0.9, 0.9)
    })
  })

  const modifiedPdf = await pdfDoc.save()
  fs.writeFileSync(outputPath, modifiedPdf)
}