当前位置：首页 > VUE

vue实现pdf签名

2026-03-09 12:07:50VUE

Vue 实现 PDF 签名的方法

使用 pdf-lib 和签名库

安装依赖库 pdf-lib 和签名生成工具（如 signature_pad）：

npm install pdf-lib signature_pad

在 Vue 组件中引入 pdf-lib 和 signature_pad：

import { PDFDocument, rgb } from 'pdf-lib';
import SignaturePad from 'signature_pad';

创建画布用于签名：

<template>
  <div>
    <canvas ref="signatureCanvas" width="400" height="200"></canvas>
    <button @click="clearSignature">清除</button>
    <button @click="saveSignature">保存签名</button>
    <input type="file" @change="handlePdfUpload" accept=".pdf" />
  </div>
</template>

初始化签名板：

mounted() {
  this.signaturePad = new SignaturePad(this.$refs.signatureCanvas);
},
methods: {
  clearSignature() {
    this.signaturePad.clear();
  },
  async saveSignature() {
    const signatureData = this.signaturePad.toDataURL();
    this.signatureImage = signatureData;
  },
  async handlePdfUpload(event) {
    const file = event.target.files[0];
    if (!file) return;
    const arrayBuffer = await file.arrayBuffer();
    this.modifyPdf(arrayBuffer);
  },
  async modifyPdf(pdfBytes) {
    const pdfDoc = await PDFDocument.load(pdfBytes);
    const pages = pdfDoc.getPages();
    const firstPage = pages[0];
    const pngImage = await pdfDoc.embedPng(this.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();
    this.downloadPdf(modifiedPdfBytes);
  },
  downloadPdf(pdfBytes) {
    const blob = new Blob([pdfBytes], { type: 'application/pdf' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'signed-document.pdf';
    link.click();
  },
}

使用现成的 PDF 签名库

安装 vue-pdf-signature 库：

npm install vue-pdf-signature

在 Vue 组件中使用：

import VuePdfSignature from 'vue-pdf-signature';
export default {
  components: {
    VuePdfSignature,
  },
}

模板中使用组件：

<vue-pdf-signature
  :pdf-url="pdfUrl"
  @signed="onSigned"
/>

处理签名完成事件：

methods: {
  onSigned(signedPdf) {
    const blob = new Blob([signedPdf], { type: 'application/pdf' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'signed-document.pdf';
    link.click();
  },
}

使用第三方服务

对于需要更复杂功能的场景，可以考虑使用专业的 PDF 签名服务如 DocuSign、Adobe Sign 等。这些服务通常提供 JavaScript SDK 或 API，可以与 Vue 应用集成。

安装 Adobe PDF Embed API：

npm install @adobe/pdf-embed

在 Vue 中使用：

import { PDFEmbed } from '@adobe/pdf-embed';
export default {
  mounted() {
    const viewer = new PDFEmbed({
      clientId: 'YOUR_CLIENT_ID',
      divId: 'pdf-viewer',
    });
    viewer.previewFile('document.pdf', {});
  },
}