vue实现pdf签名

Vue 实现 PDF 签名的方法

使用 pdf-lib 和 signature_pad 库

安装依赖库：

npm install pdf-lib signature_pad

创建签名画布组件：

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

<script>
import SignaturePad from 'signature_pad';

export default {
  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：

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

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

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

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

  return await pdfDoc.save();
}

使用 vue-pdf-signature 插件

安装插件：

npm install vue-pdf-signature

在组件中使用：

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

<script>
import VuePdfSignature from 'vue-pdf-signature';

export default {
  components: {
    VuePdfSignature
  },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf'
    };
  },
  methods: {
    onSigned(signedPdf) {
      // 处理签名后的PDF
    }
  }
};
</script>

使用 PDF.js 和自定义签名层

加载 PDF 文档：

const loadingTask = pdfjsLib.getDocument(pdfUrl);
loadingTask.promise.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    const viewport = page.getViewport({ scale: 1.0 });
    const canvas = document.getElementById('pdf-canvas');
    const context = canvas.getContext('2d');

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

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

添加签名层：

<template>
  <div class="pdf-container">
    <canvas id="pdf-canvas"></canvas>
    <div class="signature-overlay" ref="signatureOverlay"></div>
  </div>
</template>

<style>
.pdf-container {
  position: relative;
}
.signature-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
}
</style>

实现签名保存功能

将画布转换为图像：

function canvasToImage(canvas) {
  return canvas.toDataURL('image/png');
}

下载签名后的 PDF：

function downloadPdf(pdfBytes, fileName) {
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
}

响应式设计考虑

调整画布大小：

function resizeCanvas() {
  const canvas = this.$refs.signatureCanvas;
  const ratio = Math.max(window.devicePixelRatio || 1, 1);
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext('2d').scale(ratio, ratio);
  if (this.signaturePad) {
    this.signaturePad.clear();
  }
}

移动端支持

添加触摸事件支持：

this.signaturePad = new SignaturePad(canvas, {
  onBegin: () => {
    // 触摸开始
  },
  onEnd: () => {
    // 触摸结束
  }
});

签名验证功能

验证签名是否存在：

function isSignatureEmpty() {
  return this.signaturePad.isEmpty();
}

时间戳功能

添加签名时间：

function addTimestamp(pdfDoc) {
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];
  const now = new Date();

  firstPage.drawText(now.toLocaleString(), {
    x: 50,
    y: 30,
    size: 12,
    color: rgb(0, 0, 0),
  });
}

这些方法提供了在 Vue 中实现 PDF 签名的不同途径，可以根据项目需求选择适合的方案。