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 ...
随机推荐
- 2021-10-22：颠倒二进制位。颠倒给定的 32 位无符号整数的二进制位。提示：请注意，在某些语言（如 Java）中，没有无符号整数类型。在这种情况下，输入和输出都将被指定为有符号整数类型，并且不
2021-10-22:颠倒二进制位.颠倒给定的 32 位无符号整数的二进制位.提示:请注意,在某些语言(如 Java)中,没有无符号整数类型.在这种情况下,输入和输出都将被指定为有符号整数类型,并且不 ...
- vue全家桶进阶之路44：Vue3 Element Plus el_row和el_col组件
在 Vue 3 中,Element Plus 也提供了 ElRow 和 ElCol 组件,用于实现栅格布局. ElRow 组件的常用属性: gutter:栅格间距,默认为 0. type:布局模式,可 ...
- 基于Sentinel自研组件的系统限流、降级、负载保护最佳实践探索
作者:京东物流 杨建民 一.Sentinel简介 Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性. Sentinel 具有以下特征: 丰富的应用场景:秒 ...
- springboot 自动装配的原理
自动装配原理 问题就是为什么我们直接导入依赖就可以使用了,甚至不用配置web.xml,tomcat等,springboot内部是如何实现的? 主启动类上的注解@SpringBootApplicatio ...
- Java实现Kafka生产者和消费者的示例
Kafka简介 Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写.Kafka的目标是为处理实时数据提供一个统一.高吞吐.低延迟的平台. 文章持续更新,微信搜索「 ...
- python里class(类)中object是什么意思
python的class(类)中的object是什么意思? 写object和不写object有什么区别? 示例代码 class Test: name = "libai" class ...
- 案例实践 | 某能源企业API安全实践
随着智能电网.全球能源互联网."互联网+电力".新电改的全面实施,分布式能源.新能源.电力交易.智能用电等新型业务不断涌现,运营模式.用户群体都将发生较大变化,电力市场由相对专业向 ...
- CSS3实现3D效果的图片墙
先来看一下效果:http://39.105.101.122/myhtml/CSS/transform_3D/img_3D.html 目前没有做IE的兼容,在谷歌浏览器里面可以看到效果 布局结构: &l ...
- 聊一聊 Rust 的 stack overflow
早上看到了这篇文章 智能指针有可能会让你的应用崩溃, 下面分析一下 会导致 stack overflow 的代码 struct Node<T> { val: T, next: Option ...
- [ARM 汇编]高级部分—性能优化与调试—3.4.3 使用模拟器进行调试与测试
在ARM汇编程序开发过程中,使用模拟器(emulator)进行调试和测试是一种非常有效的方法.模拟器可以在不同的处理器上测试代码,帮助我们发现潜在的问题,并提供丰富的调试功能.本节将介绍如何使用QEM ...