vue 实现电子签名 vue-signature-pad

vue-signature-pad pc电子签名

• 实例
  
• 下载依赖

//Vue 2 项目：安装 vue-signature-pad 的 2.0.5 版本。
npm install --save vue-signature-pad@2.0.5
//Vue 3 项目：安装最新版本的 vue-signature-pad。
npm install --save vue-signature-pad

• 全局引入 vue3 实例

//main.js
import { createApp } from 'vue'
const app = createApp(App)
import { VueSignaturePad } from 'vue-signature-pad';
app.component("VueSignaturePad", VueSignaturePad);

• 封装签名组件

// signinDia.vue
<template>
  <div>
    <el-space class="mb10" size="large">
      <div>
        <el-text>画笔粗细</el-text>
        <el-input-number v-model="state.size" :min="2" :max="10" :step="1" @change="onChange" />
      </div>
      <div>
        <el-text>画笔颜色</el-text>
        <el-color-picker v-model="state.color" color-format="hex" @change="onChange"> </el-color-picker>
      </div>
    </el-space>
    <VueSignaturePad v-if="show1" class="line" ref="signaturePad" :options="signOptions" :images="images" :customStyle="customStyle"
      width="100%" height="200px" />
    <el-space class="mt10">
      <el-button @click="unDoSign">撤销</el-button>
      <el-button @click="clearSign">清屏</el-button>
      <el-button type="primary" @click="saveUploadSign">保存下载</el-button>
    </el-space>
  </div>
</template>
<script setup>
import { nextTick, ref, watch } from "vue";
const signaturePad = ref();
const show1 = ref(false)
//最后加载组件
nextTick(() => { show1.value = true })
const signOptions = ref({
  minWidth: 2, // 画笔最小宽度
  maxWidth: 5, // 画笔最大宽度
  throttle: 5, // 画笔移动事件的时间间隔，单位为毫秒
  minDistance: 5, // 画笔移动的最小距离，单位为像素
  backgroundColor: "rgba(218, 215, 215, 0.829)", // 画布背景颜色
  penColor: "black", // 画笔颜色
  velocityFilterWeight: 0.7, // 画笔速度过滤器的权重
  onBegin: () => { 
    console.log('=== Begin ===');
  }, // 开始签名时的回调函数
  onEnd: () => { 
    console.log('=== End ===');
  }, // 结束签名时的回调函数
})

const customStyle = ref({
  signatureCanvas: {
    border: "1px solid #ccc", // 画布边框
    borderRadius: "5px", // 画布圆角
  }
}
)
const images = ref([])
const state = ref({
  color: "#000",
  size: 1
})
// 画笔颜色粗细改变时
const onChange = () => {
  signOptions.value = {
    penColor: state.value.color,
    maxWidth: state.value.size
  }
}

// 撤销电子签名
const unDoSign = () => {
  signaturePad.value.undoSignature();
};

// 清空电子签名
const clearSign = () => {
  signaturePad.value.clearSignature();
};

// 保存并上传电子签名
const emit = defineEmits(['setsignin'])
const saveUploadSign = async () => {
  console.log('检查签名板实例是否有效', signaturePad.value);  // 检查签名板实例是否有效
  const { isEmpty, data } = signaturePad.value.saveSignature();
  if (isEmpty) return;
  console.log("picture url：", data);
  if (data) {
    emit('setsignin',data)
 // 创建一个虚拟的下载链接
 const link = document.createElement('a');
    link.href = data;
    link.download = 'signature.png';  // 设置下载文件名
    // 为了确保链接点击被浏览器允许，稍微延时触发下载
    setTimeout(() => {
      link.click();  // 自动点击下载链接，触发文件下载
      // show1.value = false
    }, 100);  // 100毫秒的延时
  
  }
};
</script>

• 需要页面引入

<template>
  <div class="app-container">
    <el-image v-if="setsignin" @click="handlePreview()" :src="form.electronicSignature" :zoom-rate="1.2"
      :max-scale="7" :min-scale="0.2" fit="cover" placeholder="点击生成" error="点击签字">
    </el-image>
    <span v-else style="color: steelblue;cursor: pointer;" @click="handlePreview()">点击签名</span>
     
    <!--电子签名弹框 -->
    <el-dialog title="电子签名" v-model="signinVisible" width="700px" :close-on-click-modal="false" append-to-body
      @close="signinVisible = false">
      <signinDia @setsignin="setsignin"></signinDia>
    </el-dialog>
  </div>
</template>

<script setup name="User">
import signinDia from "./compent/signinDia.vue"
const signinVisible=ref(false)//电子签名
const setsignin=ref（''）//电子签名路径
//签字弹框关闭
function setsignin(img) {
  setsignin.value = img
  signinVisible.value=false
}
//点击签字
function handlePreview () {
  console.log('点击签字');
  signinVisible.value=true
}
</script>