当前位置：首页 > VUE

vue实现pdf签名

2026-02-17 23:28:33VUE

Vue 实现 PDF 签名功能

使用 pdf-lib 和 signature_pad 库

安装依赖库：

npm install pdf-lib signature_pad

创建签名画布组件：

<template>
  <div>
    <canvas ref="signatureCanvas" width="500" height="200"></canvas>
    <button @click="clearSignature">清除</button>
    <button @click="saveSignature">保存</button>
  </div>
</template>

<script>
import SignaturePad from 'signature_pad'

export default {
  data() {
    return {
      signaturePad: null
    }
  },
  mounted() {
    this.signaturePad = new SignaturePad(this.$refs.signatureCanvas)
  },
  methods: {
    clearSignature() {
      this.signaturePad.clear()
    },
    saveSignature() {
      const signatureData = this.signaturePad.toDataURL()
      this.$emit('signature-saved', signatureData)
    }
  }
}
</script>

将签名添加到 PDF

处理 PDF 文档：

vue实现pdf签名

import { PDFDocument, rgb } from 'pdf-lib'

async function addSignatureToPdf(pdfBytes, signatureImage) {
  const pdfDoc = await PDFDocument.load(pdfBytes)
  const pages = pdfDoc.getPages()
  const firstPage = pages[0]

  const pngImage = await pdfDoc.embedPng(signatureImage)
  const pngDims = pngImage.scale(0.5)

  firstPage.drawImage(pngImage, {
    x: 50,
    y: 50,
    width: pngDims.width,
    height: pngDims.height,
  })

  const modifiedPdfBytes = await pdfDoc.save()
  return modifiedPdfBytes
}

完整实现示例

主组件实现：

<template>
  <div>
    <input type="file" @change="handlePdfUpload" accept=".pdf" />
    <signature-pad v-if="pdfFile" @signature-saved="handleSignatureSave" />
    <button v-if="signedPdf" @click="downloadSignedPdf">下载签名PDF</button>
  </div>
</template>

<script>
import SignaturePad from './SignaturePad.vue'
import { addSignatureToPdf } from './pdf-utils'

export default {
  components: {
    SignaturePad
  },
  data() {
    return {
      pdfFile: null,
      signedPdf: null
    }
  },
  methods: {
    async handlePdfUpload(event) {
      this.pdfFile = event.target.files[0]
    },
    async handleSignatureSave(signatureData) {
      const arrayBuffer = await this.pdfFile.arrayBuffer()
      const signedPdfBytes = await addSignatureToPdf(arrayBuffer, signatureData)
      this.signedPdf = new Blob([signedPdfBytes], { type: 'application/pdf' })
    },
    downloadSignedPdf() {
      const url = URL.createObjectURL(this.signedPdf)
      const link = document.createElement('a')
      link.href = url
      link.download = 'signed-document.pdf'
      link.click()
    }
  }
}
</script>

其他注意事项

签名画布样式需要适当调整以确保清晰度：

vue实现pdf签名

canvas {
  border: 1px solid #000;
  background-color: #f8f8f8;
}

对于移动端支持，需要添加触摸事件处理：

mounted() {
  this.signaturePad = new SignaturePad(this.$refs.signatureCanvas, {
    onEnd: () => {
      this.$emit('signature-changed', this.signaturePad.isEmpty())
    }
  })
  this.setupCanvasScaling()
},
methods: {
  setupCanvasScaling() {
    const canvas = this.$refs.signatureCanvas
    function resizeCanvas() {
      const ratio = Math.max(window.devicePixelRatio || 1, 1)
      canvas.width = canvas.offsetWidth * ratio
      canvas.height = canvas.offsetHeight * ratio
      canvas.getContext('2d').scale(ratio, ratio)
      this.signaturePad.clear() // 防止缩放后签名变形
    }
    window.addEventListener('resize', resizeCanvas)
    resizeCanvas()
  }
}