当前位置：首页 > VUE

vue实现文件电子签名

2026-01-23 17:00:24VUE

实现文件电子签名的基本步骤

安装依赖库 需要使用signature_pad库实现手写签名功能，通过npm或yarn安装：

npm install signature_pad
# 或
yarn add signature_pad

创建签名组件 新建一个Vue组件（如SignaturePad.vue），引入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('image/png');
      this.$emit('save', signatureData);
    }
  }
};
</script>

文件上传与签名绑定

文件上传组件 创建文件上传组件并绑定签名数据：

vue实现文件电子签名

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".pdf,.doc,.docx" />
    <SignaturePad @save="handleSignatureSave" />
    <button @click="submit">提交签名文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      signature: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    handleSignatureSave(signatureData) {
      this.signature = signatureData;
    },
    submit() {
      const formData = new FormData();
      formData.append('file', this.file);
      formData.append('signature', this.signature);
      // 调用API上传数据
    }
  }
};
</script>

签名图片叠加到文件

后端处理建议 若需将签名图片叠加到文件（如PDF），后端可使用以下库：

Python: PyPDF2 + reportlab
Node.js: pdf-lib + canvas

示例Node.js代码片段：

vue实现文件电子签名

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

async function addSignatureToPDF(pdfPath, signaturePath, outputPath) {
  const pdfBytes = fs.readFileSync(pdfPath);
  const pdfDoc = await PDFDocument.load(pdfBytes);
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];

  const signatureImage = await pdfDoc.embedPng(fs.readFileSync(signaturePath));
  firstPage.drawImage(signatureImage, {
    x: 50,
    y: 50,
    width: 150,
    height: 75,
  });

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

增强功能实现

签名验证 可通过以下方式增强安全性：

添加时间戳：签名时记录UTC时间并一起上传
生成哈希：使用crypto-js对签名数据生成SHA256哈希
```
import SHA256 from 'crypto-js/sha256';
```

const signatureHash = SHA256(signatureData).toString();


移动端适配
添加触摸事件支持：
```vue
<template>
  <canvas 
    ref="signatureCanvas"
    @mousedown="handleStart"
    @mousemove="handleMove"
    @mouseup="handleEnd"
    @touchstart="handleStart"
    @touchmove="handleMove"
    @touchend="handleEnd"
  ></canvas>
</template>