经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » Java相关 » Java » 查看文章
Html+JavaScript实现手写签名
来源:cnblogs  作者:葡萄城技术团队  时间:2023/8/18 9:29:07  对本文有异议

前言

Hello各位,本葡萄又来啦,今天遇到的场景是这样的:在日常业务流程中,经常需要某一流程环节中相关责任人员进行审批签字,早期许多公司为了省事就直接会把这位负责人的签名以键盘打字(楷体)的形式打印出来,但是这样的坏处就是会导致所有的负责人的签名都是一样的,没有美感,为了解决这个问题,一些公司就开始使用手写签名(用鼠标写出来的签名)代替电子签名,今天本葡萄就为大家简单的介绍下手写签名到底是怎么实现的。话不多说,先上效果图:

看完效果图之后,下面为大家介绍实现的详细过程。

使用Html+JavsScript实现手写签名的添加

1.实现Html界面

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>SpreadJS in TypeScript</title>
  5. <!--引入在线Excel资源-->
  6. <link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
  7. <link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">
  8. <script src="node_modules/systemjs/dist/system.src.js"></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.3/jSignature.min.js" integrity="sha512-lZ7GJNAmaXw7L4bCR5ZgLFu12zSkuxHZGPJdIoAqP6lG+4eoSvwbmKvkyfauz8QyyzHGUGVHyoq/W+3gFHCLjA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  11. <script src="systemjs.config.js"></script>
  12. <script>
  13. System.import('./src/app');
  14. </script>
  15. </head>
  16. <!--添加清空和确认功能-->
  17. <body>
  18. <div id="signArea" style="position: absolute;top:100px;left:200px;visibility:hidden;z-index:100">
  19. <div id="sign" style="height:300px;width:600px;border:1px dashed \#ddd;margin-bottom:10px"></div>
  20. <div>
  21. <button id="clear">清空</button>
  22. <button id="confirm">确认</button>
  23. </div>
  24. </div>
  25. <div id="designer-container" style="width:100%;height:90vh;border:1px solid darkgray"></div>
  26. </body>
  27. </html>

首先引入需要的在线Excel资源包,然后添加增加清空和确认手写签名两个按钮。

2.手写签名的JavsScript实现方法

(1) 添加手写签名:

  1. let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
  2. let customeAddSign = {
  3. "text":"添加手写签名",
  4. commandName:"customeAddSign",
  5. execute:() =\> {
  6. if(document.getElementById("signArea")){
  7. document.getElementById("signArea").style.visibility = 'visible'
  8. }
  9. }
  10. }

(2) 追加右键自定义菜单:

核心代码:

  1. // 追加自定义右键菜单
  2. config.contextMenu.push("customeAddSign")
  3. config.commandMap = {
  4. customeAddSign
  5. }
  6. let designer = new GC.Spread.Sheets.Designer.Designer("designer-container",config)
  7. let spread = designer.getWorkbook()
  8. $("#sign").jSignature({lineWidth:'16',width:'100%',height:'100%'})
  9. document.getElementById("clear").onclick = function(){
  10. $("#sign").jSignature("reset")
  11. }
  12. document.getElementById("confirm").onclick = function(){
  13. let datapair = "data:" + $("#sign").jSignature("getData")
  14. let sheet = spread.getActiveSheet()
  15. let row = sheet.getActiveRowIndex()
  16. let col = sheet.getActiveColumnIndex()
  17. let picture = sheet.shapes.addPictureShape(`${sheet.name()}-${row}-${col}}`, datapair,0,0,100,100);
  18. picture.startRow(row)
  19. picture.endRow(row + 1)
  20. picture.startColumn(col)
  21. picture.endColumn(col + 1)
  22. picture.startRowOffset(0);
  23. picture.startColumnOffset(0);
  24. picture.endRowOffset(0);
  25. picture.endColumnOffset(0);
  26. picture.allowResize(false)
  27. picture.allowMove(false)
  28. picture.allowRotate(false)
  29. $("#sign").jSignature("reset")
  30. document.getElementById("signArea").style.visibility = 'hidden'
  31. }

这一步的作用是实现在Excel单元格中添加手写签名的功能,右键菜单选择手写签名后会调用对应的签名插件,在签名插件上可以用鼠标进行输入,输入完之后点击确认就会显示在单元格中。

完整代码和在线Demo地址:

相信看到这里,很多小伙伴已经想操作一下了吧,本葡萄也为大家准备了一个自由发挥的平台,点击下方链接便可以跳转到对应的Demo在线地址(安全可食):

https://jscodemine.grapecity.com/share/sXBAh7hZ00SAsemg_1jLbQ/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"]%2C"ActiveFile"%3A"%2Findex.html"}

扩展链接:

Spring Boot框架下实现Excel服务端导入导出

项目实战:在线报价采购系统(React +SpreadJS+Echarts)

Svelte 框架结合 SpreadJS 实现纯前端类 Excel 在线报表设计

原文链接:https://www.cnblogs.com/powertoolsteam/p/17636676.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号