当前位置：首页 > VUE

vue实现文件电子签名

2026-02-24 07:31:43VUE

实现电子签名的基本思路

在Vue中实现文件电子签名通常需要结合Canvas绘图和文件处理功能。电子签名的核心是允许用户在画布上签名，并将签名结果保存为图片或直接嵌入到PDF等文档中。

使用Canvas绘制签名

创建一个Vue组件，包含Canvas元素用于签名绘制：

<template>
  <div>
    <canvas 
      ref="signaturePad" 
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
      @touchstart="startDrawing"
      @touchmove="draw"
      @touchend="stopDrawing">
    </canvas>
    <button @click="clearSignature">清除</button>
    <button @click="saveSignature">保存签名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      canvas: null,
      ctx: null
    }
  },
  mounted() {
    this.canvas = this.$refs.signaturePad
    this.ctx = this.canvas.getContext('2d')
    this.resizeCanvas()
    window.addEventListener('resize', this.resizeCanvas)
  },
  methods: {
    resizeCanvas() {
      this.canvas.width = this.canvas.offsetWidth
      this.canvas.height = this.canvas.offsetHeight
      this.ctx.lineWidth = 2
      this.ctx.lineCap = 'round'
      this.ctx.strokeStyle = '#000000'
    },
    startDrawing(e) {
      this.isDrawing = true
      const pos = this.getPosition(e)
      this.ctx.beginPath()
      this.ctx.moveTo(pos.x, pos.y)
    },
    draw(e) {
      if (!this.isDrawing) return
      const pos = this.getPosition(e)
      this.ctx.lineTo(pos.x, pos.y)
      this.ctx.stroke()
    },
    stopDrawing() {
      this.isDrawing = false
    },
    getPosition(e) {
      const rect = this.canvas.getBoundingClientRect()
      return {
        x: (e.clientX || e.touches[0].clientX) - rect.left,
        y: (e.clientY || e.touches[0].clientY) - rect.top
      }
    },
    clearSignature() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    },
    saveSignature() {
      const image = this.canvas.toDataURL('image/png')
      this.$emit('signature-saved', image)
    }
  }
}
</script>

将签名添加到PDF文件

要将签名添加到PDF文件，可以使用pdf-lib等库：

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

async function addSignatureToPDF(pdfBytes, signatureImage) {
  const pdfDoc = await PDFDocument.load(pdfBytes)
  const pngImage = await pdfDoc.embedPng(signatureImage)

  const pages = pdfDoc.getPages()
  const firstPage = pages[0]

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

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

使用第三方签名库

对于更专业的解决方案，可以考虑使用专门的签名库：

signature_pad: 一个流行的Canvas签名库

npm install signature_pad

使用示例：


import SignaturePad from 'signature_pad'

export default { mounted() { const canvas = this.$refs.signaturePad this.signaturePad = new SignaturePad(canvas) }, methods: { saveSignature() { if (this.signaturePad.isEmpty()) { alert('请先签名') return } const data = this.signaturePad.toDataURL('image/png') this.$emit('signature-saved', data) } } }


2. vue-signature: 专为Vue设计的签名组件
```bash
npm install vue-signature

使用示例：

<template>
  <vue-signature ref="signature" :sigOption="option"></vue-signature>
</template>

<script>
import VueSignature from 'vue-signature'

export default {
  components: { VueSignature },
  data() {
    return {
      option: {
        penColor: 'rgb(0, 0, 0)',
        backgroundColor: 'rgb(255, 255, 255)'
      }
    }
  }
}
</script>

签名验证与安全

为确保电子签名的法律效力，应考虑以下安全措施：

记录签名时间戳
存储签名时的用户信息
使用加密技术保护签名数据
考虑使用数字证书进行签名验证

服务器端处理

将签名发送到服务器进行存储和处理：

async function uploadSignature(signatureData) {
  try {
    const response = await axios.post('/api/signature', {
      image: signatureData,
      metadata: {
        userId: '123',
        timestamp: new Date().toISOString()
      }
    })
    return response.data
  } catch (error) {
    console.error('上传签名失败:', error)
    throw error
  }
}

以上方法提供了在Vue应用中实现电子签名的完整流程，从基本的Canvas绘制到专业的签名库使用，再到与PDF文档的集成和服务器端处理。根据项目需求选择适合的方案即可。

vue实现文件电子签名