vue3-signature实现电子签名

组件官方参考地址https://github.com/WangShayne/vue3-signature/blob/HEAD/README.zh-CN.md在数字化办公的当下电子合同签署、公务在线办理、审批流程签字…… 手写签名的电子化需求随处可见。但如果从零开始用 Canvas 开发手写签名功能既要处理鼠标 / 触摸事件又要做兼容适配费时又费力。今天给大家安利一款 Vue3 专属的手写签名神器 ——vue3-signature组件底层基于 Canvas 封装核心功能一键调用5 分钟就能集成到项目中不用再写复杂的原生 Canvas 代码新手也能轻松拿捏vue3-signature 到底是什么vue3-signature 是专门为 Vue3 生态打造的手写签名组件完美适配 Vue3 的组合式 API 和语法堪称 Vue3 项目实现电子签名的首选方案。它的核心优势超亮眼底层基于 Canvas 实现支持鼠标、移动端触摸双端手写无需额外做事件兼容自带签名保存、清空、回退核心功能还能自定义画笔颜色 / 粗细体积轻量无冗余API 设计简洁易懂调用无门槛直接封装好所有底层逻辑开发者只需关注业务使用不用重复造轮子。安装在你的 Vue3 项目根目录执行以下命令# Using npm npm install vue3-signature # Using yarn yarn add vue3-signature # Using pnpm pnpm add vue3-signature全局注册// main.js import { createApp } from vue; import Vue3Signature from vue3-signature; import App from ./App.vue; createApp(App).use(Vue3Signature).mount(#app);局部直接引入使用import Vue3Signature fromvue3-signaturevue3使用案例template div classsignature-container !-- 签名画布核心组件 -- Vue3Signature refsignatureRef :width500 :height300 pen-color#000000 :pen-width3 :disabledfalse classsignature-canvas / !-- 操作按钮组 -- div classsignature-btns button classsignature-btnsbutton clickclearSignature清空签名/button button classsignature-btnsbutton clicksaveSignature保存签名/button button classsignature-btnsbutton clickundoSignature撤销一步/button /div /div /template script setup langts import { ref } fromvue import Vue3Signature fromvue3-signature // 获取组件实例用于调用内置方法 const signatureRef:any ref(null) // 清空整个签名画布 const clearSignature () { signatureRef.value.clear() } // 撤销上一步书写 const undoSignature () { signatureRef.value.undo() } // // 保存签名支持Base64/Blob两种格式 const saveSignature () { try { // 官方标准方法toDataURL(格式, 压缩率) const base64 signatureRef.value?.toDataURL(image/png, 1.0); console.log(签名Base64, base64); // 或使用save()别名兼容旧版 // const base64 signatureRef.value?.save(image/png, 1.0); } catch (error) { console.error(保存失败:, error); alert(签名保存失败请检查组件状态); } }; /script style scoped .signature-container { width: 500px; margin: 20px auto; } .signature-canvas { border: 1px solid #e5e5e5; border-radius: 4px; } .signature-btns { margin-top: 15px; display: flex; gap: 10px; } .signature-btnsbutton { padding: 6px12px; background: #5b636b; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .signature-btnsbutton:hover { background: #66b1ff; } /style解决开发中 3 个常见问题基础功能实现后实际开发中还会遇到移动端适配、空签名提交、跨域等问题这几个优化方案帮你完美避坑响应式设计template div classsignature-container Vue3Signature refsignature :w100% :h100% :clearOnResizefalse / /div /template script setup import { ref } from vue; const signature ref(null); /script style scoped .signature-container { width: 100%; height: 400px; max-width: 800px; margin: 0 auto; border: 2px solid #e0e0e0; border-radius: 8px; overflow: hidden; } media (max-width: 768px) { .signature-container { height: 300px; } } /style签名校验避免空签名提交// 校验是否完成签名 const checkSignature () { if (signatureRef.value.isEmpty()) { alert(请完成手写签名) returnfalse } returntrue } // 保存签名前先执行校验 const saveSignature () { if (!checkSignature()) return // 后续保存逻辑... }跨域问题插入背景图必看如果需要在签名画布中插入合同模板、表单背景图必须保证图片资源支持跨域否则会导致getDataUrl/getBlob方法报错。✅ 解决办法要求后端配置跨域响应头或直接使用项目同域的图片资源。