共计 3353 个字符,预计需要花费 9 分钟才能阅读完成。
前言
Hello 各位,本葡萄又来啦,明天遇到的场景是这样的:在日常业务流程中,常常须要某一流程环节中相干责任人员进行审批签字,晚期许多公司为了省事就间接会把这位负责人的签名以键盘打字(楷体)的模式打印进去,然而这样的害处就是会导致所有的负责人的签名都是一样的,没有美感,为了解决这个问题,一些公司就开始应用手写签名(用鼠标或者是电子笔写进去的签名)代替电子签名,明天本葡萄就为大家简略的介绍下手写签名到底是怎么实现的。话不多说,先上效果图:
看完效果图之后,上面为大家介绍实现的具体过程。
应用 Html+JavsScript 实现手写签名的增加
1. 实现 Html 界面
<!doctype html> | |
<html> | |
<head> | |
<title>SpreadJS in TypeScript</title> | |
<!-- 引入在线 Excel 资源 --> | |
<link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> | |
<link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"> | |
<script src="node_modules/systemjs/dist/system.src.js"></script> | |
<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> | |
<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> | |
<script src="systemjs.config.js"></script> | |
<script> | |
System.import('./src/app'); | |
</script> | |
</head> | |
<!-- 增加清空和确认性能 --> | |
<body> | |
<div id="signArea" style="position: absolute;top:100px;left:200px;visibility:hidden;z-index:100"> | |
<div id="sign" style="height:300px;width:600px;border:1px dashed \#ddd;margin-bottom:10px"></div> | |
<div> | |
<button id="clear"> 清空 </button> | |
<button id="confirm"> 确认 </button> | |
</div> | |
</div> | |
<div id="designer-container" style="width:100%;height:90vh;border:1px solid darkgray"></div> | |
</body> | |
</html> |
首先引入须要的在线 Excel 资源包,而后增加减少清空和确认手写签名两个按钮。
2. 手写签名的 JavsScript 实现办法
(1) 增加手写签名:
let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)) | |
let customeAddSign = { | |
"text":"增加手写签名", | |
commandName:"customeAddSign", | |
execute:() =\> {if(document.getElementById("signArea")){document.getElementById("signArea").style.visibility = 'visible' | |
} | |
} | |
} |
(2) 追加右键自定义菜单:
外围代码:
// 追加自定义右键菜单 | |
config.contextMenu.push("customeAddSign") | |
config.commandMap = {customeAddSign} | |
let designer = new GC.Spread.Sheets.Designer.Designer("designer-container",config) | |
let spread = designer.getWorkbook() | |
$("#sign").jSignature({lineWidth:'16',width:'100%',height:'100%'}) | |
document.getElementById("clear").onclick = function(){$("#sign").jSignature("reset") | |
} | |
document.getElementById("confirm").onclick = function(){let datapair = "data:" + $("#sign").jSignature("getData") | |
let sheet = spread.getActiveSheet() | |
let row = sheet.getActiveRowIndex() | |
let col = sheet.getActiveColumnIndex() | |
let picture = sheet.shapes.addPictureShape(`${sheet.name()}-${row}-${col}}`, datapair,0,0,100,100); | |
picture.startRow(row) | |
picture.endRow(row + 1) | |
picture.startColumn(col) | |
picture.endColumn(col + 1) | |
picture.startRowOffset(0); | |
picture.startColumnOffset(0); | |
picture.endRowOffset(0); | |
picture.endColumnOffset(0); | |
picture.allowResize(false) | |
picture.allowMove(false) | |
picture.allowRotate(false) | |
$("#sign").jSignature("reset") | |
document.getElementById("signArea").style.visibility = 'hidden' | |
} |
这一步的作用是实现在 Excel 单元格中增加手写签名的性能,右键菜单抉择手写签名后会调用对应的签名插件,在签名插件上能够用鼠标进行输出,输出完之后点击确认就会显示在单元格中。
残缺代码和在线 Demo 地址:
置信看到这里,很多小伙伴曾经想操作一下了吧,本葡萄也为大家筹备了一个自由发挥的平台,点击下方链接便能够跳转到对应的 Demo 在线地址(平安可食):
https://jscodemine.grapecity.com/share/sXBAh7hZ00SAsemg_1jLbQ…
扩大链接:
Spring Boot 框架下实现 Excel 服务端导入导出
我的项目实战:在线报价洽购零碎(React +SpreadJS+Echarts)
Svelte 框架联合 SpreadJS 实现纯前端类 Excel 在线报表设计
正文完