Html+JavaScript实现手写签名
前言
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在线地址（安全可食）：
扩展链接：
项目实战：在线报价采购系统（React +SpreadJS+Echarts）
Svelte 框架结合 SpreadJS 实现纯前端类 Excel 在线报表设计
Html+JavaScript实现手写签名的更多相关文章
- Blazor组件自做二 : 使用JS隔离制作手写签名组件
Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...
- canvas画布实现手写签名效果
最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...
- uni-app通过canvas实现手写签名
分享一个uni-app实现手写签名的方法 具体代码如下: <template> <view > <view class="title">请在下面 ...
- Ionic5手写签名SignaturePad
测试程序下载:https://hanzhe.lanzous.com/itt47kncw3a 初始化项目 1. 首先新建一个Ionic5的项目: ionic start test-1 blank 2. ...
- html5手写签名
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta co ...
- 用canvas实现手写签名功能
最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器.这样的需求用 canvas 实现是最好的.需要用到 canvas 的以下几个属性: b ...
- WORD2003电子签名插件(支持手写、签章)
1.引言 WORD电子签名插件,支持手写.本地电子图章.以及网络图章功能.软件使用VC6,以ATL方式编写,软件小巧精致. 这是我学习ATL的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...
- 22 道高频 JavaScript 手写面试题及答案
实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 那么与节流函数的区别直接看这个动画实现即可. 手写简化版: // 防抖函数 cons ...
- javaScript（js）手写原生任务定时器源码
javaScript(js)手写原生任务定时器 功能介绍 定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务 ...
- Javascript之我也来手写一下Promise
Promise太重要了,可以说是改变了JavaScript开发体验重要内容之一.而Promise也可以说是现代Javascript中极为重要的核心概念,所以理解Promise/A+规范,理解Promi ...
随机推荐
- 2020-12-19：系统load过高，你怎么去查？
福哥答案2020-12-20:[答案来自此链接:](http://bbs.xiangxueketang.cn/question/800)1.top命令查看该机器的负载状况.2.cd /proc/pid ...
- 2022-06-25：给定一个正数n, 表示有0~n-1号任务， 给定一个长度为n的数组time，time[i]表示i号任务做完的时间， 给定一个二维数组matrix， matrix[j] = {a,
2022-06-25:给定一个正数n, 表示有0~n-1号任务, 给定一个长度为n的数组time,time[i]表示i号任务做完的时间, 给定一个二维数组matrix, matrix[j] = {a, ...
- 报错HTTP 405 Method Not Allowed， Allow: POST, OPTIONS， "detail": "方法 “GET” 不被允许。"
当测试注册功能是否实现时,出现了这种情况的405:HTTP 405 Method Not AllowedAllow: POST, OPTIONSContent-Type: application/js ...
- List的拆分的几种方式
开发中我们可能会遇到一个大的集合,然后我们需要对集合进行拆分,然后再对拆分的集合进行相关的操作.当然我们可以自己写一个拆分的方法,我自己写过用了不少代码,但是感觉还不是很好,最近看了不少工具才发现很多 ...
- 【PAT】1001 害死人不偿命的(3n+1)猜想(动态更新）
卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 ( 砍掉一半.这样一直反复砍下去,最后一定在某一步得到 n=1.卡拉兹在 1950 年的世界 ...
- 2023-06-15：说一说Redis的Key和Value的数据结构组织?
2023-06-15:说一说Redis的Key和Value的数据结构组织? 答案2023-06-15: 全局哈希表 Redis使用哈希表作为保存键值对的数据结构,通过哈希函数将Key映射为哈希表中的一 ...
- CHAT-GPT初使用
拿chatgpt去试验了一下,一个挺小的需求,但是前后还是更改了三次,体验就是它可以不断改进之前实现的代码,但需要提需求的人比较清楚需求内的细节,差不多类似于,我有想法,它来实现,还是可以提高不少效率 ...
- 函数接口（Functional Interfaces）
定义 首先,我们先看看函数接口在<Java语言规范>中是怎么定义的: 函数接口是一种只有一个抽象方法(除Object中的方法之外)的接口,因此代表一种单一函数契约.函数接口的抽象方法可以是 ...
- 衔尾法解决当无法使用空闲中断以及DMA中断时配置DMA接收串口不定长数据
[Ooonly新人贴]记录工作中遇到的问题,话不多说先上干货 问题:类似K线与蓝牙接收部门模块,要求由原来的接收串口中断改为DMA接收.据说要用到空闲中断与DMA中断,但是经仿真发现DMA每完成传输一 ...
- OAuth2.0andmultifactorauthentication:Howtocreateasecure
目录 1. 引言 2. 技术原理及概念 2.1. 基本概念解释 2.2. 技术原理介绍 2.3. 相关技术比较 3. 实现步骤与流程 3.1. 准备工作:环境配置与依赖安装 随着数字化时代的到来,人们 ...