当前位置：首页 > VUE

vue实现签章

2026-01-07 20:23:30VUE

Vue 实现签章功能

签章功能通常包括手写签名、电子印章等。以下是基于 Vue 的实现方法：

使用 canvas 实现手写签名

安装依赖（如需要）：

npm install signature_pad

组件代码示例：

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

<script>
import SignaturePad from 'signature_pad'

export default {
  mounted() {
    this.signaturePad = new SignaturePad(this.$refs.canvas)
  },
  methods: {
    clear() {
      this.signaturePad.clear()
    },
    save() {
      const dataURL = this.signaturePad.toDataURL()
      console.log(dataURL) // 可上传到服务器或本地保存
    }
  }
}
</script>

电子印章实现方案

静态印章组件：

<template>
  <div class="seal">
    <div class="seal-circle">
      <div class="seal-text">{{ sealText }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    sealText: {
      type: String,
      default: '公司印章'
    }
  }
}
</script>

<style>
.seal {
  width: 150px;
  height: 150px;
  position: relative;
}

.seal-circle {
  width: 100%;
  height: 100%;
  border: 3px solid red;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seal-text {
  color: red;
  font-weight: bold;
}
</style>

拖拽签章功能实现

<template>
  <div>
    <div 
      class="stamp" 
      draggable="true"
      @dragstart="dragStart"
    >
      拖拽印章
    </div>

    <div 
      class="document" 
      @dragover.prevent
      @drop="drop"
    >
      文档区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    dragStart(e) {
      e.dataTransfer.setData('text/plain', 'stamp')
    },
    drop(e) {
      const stamp = document.createElement('div')
      stamp.className = 'dropped-stamp'
      stamp.textContent = '印章'
      stamp.style.position = 'absolute'
      stamp.style.left = `${e.clientX}px`
      stamp.style.top = `${e.clientY}px`
      e.target.appendChild(stamp)
    }
  }
}
</script>

签章保存与验证

保存签章到服务器：

async function uploadSignature(signatureData) {
  try {
    const response = await axios.post('/api/signature', {
      image: signatureData
    })
    return response.data
  } catch (error) {
    console.error('上传失败', error)
  }
}

验证签章真实性时，可以在后端保存签章时的元数据（时间戳、用户ID等），前端通过接口获取验证信息。