前言

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/?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 在线报表设计

Html+JavaScript实现手写签名的更多相关文章

  1. Blazor组件自做二 : 使用JS隔离制作手写签名组件

    Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...

  2. canvas画布实现手写签名效果

    最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...

  3. uni-app通过canvas实现手写签名

    分享一个uni-app实现手写签名的方法 具体代码如下: <template> <view > <view class="title">请在下面 ...

  4. Ionic5手写签名SignaturePad

    测试程序下载:https://hanzhe.lanzous.com/itt47kncw3a 初始化项目 1. 首先新建一个Ionic5的项目: ionic start test-1 blank 2. ...

  5. html5手写签名

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta co ...

  6. 用canvas实现手写签名功能

    最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器.这样的需求用 canvas 实现是最好的.需要用到 canvas 的以下几个属性: b ...

  7. WORD2003电子签名插件(支持手写、签章)

    1.引言 WORD电子签名插件,支持手写.本地电子图章.以及网络图章功能.软件使用VC6,以ATL方式编写,软件小巧精致. 这是我学习ATL的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...

  8. 22 道高频 JavaScript 手写面试题及答案

    实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 那么与节流函数的区别直接看这个动画实现即可. 手写简化版: // 防抖函数 cons ...

  9. javaScript（js）手写原生任务定时器源码

    javaScript(js)手写原生任务定时器 功能介绍 定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务 ...

  10. Javascript之我也来手写一下Promise

    Promise太重要了,可以说是改变了JavaScript开发体验重要内容之一.而Promise也可以说是现代Javascript中极为重要的核心概念,所以理解Promise/A+规范,理解Promi ...

随机推荐

  1. 2020-10-01：谈谈golang的空结构体。

    福哥答案2020-10-01:#福大大架构师每日一题# 1.map.value是空结构体,构造集合. 2.通道.只传递信号,不传递数据. 3.切片.不管切片多长,都不会占用空间. 4.仅包含方法的结构 ...

  2. 2022-07-13：给你一个整数数组 arr ，你一开始在数组的第一个元素处（下标为 0）。 每一步，你可以从下标 i 跳到下标 i + 1 、i - 1 或者 j ： i + 1 需满足：i +

    2022-07-13:给你一个整数数组 arr ,你一开始在数组的第一个元素处(下标为 0). 每一步,你可以从下标 i 跳到下标 i + 1 .i - 1 或者 j : i + 1 需满足:i + ...

  3. 2022-04-13：给你一个下标从 0 开始包含 n 个正整数的数组 arr ，和一个正整数 k 。 如果对于每个满足 k ＜= i ＜= n-1 的下标 i ，都有 arr[i-k] ＜= arr

    2022-04-13:给你一个下标从 0 开始包含 n 个正整数的数组 arr ,和一个正整数 k . 如果对于每个满足 k <= i <= n-1 的下标 i ,都有 arr[i-k] ...

  4. 2022-02-04：组合总和 Ⅳ。 给你一个由 不同 整数组成的数组 nums ，和一个目标整数 target 。请你从 nums 中找出并返回总和为 target 的元素组合的个数。 题目数据保证

    2022-02-04:组合总和 Ⅳ. 给你一个由 不同 整数组成的数组 nums ,和一个目标整数 target .请你从 nums 中找出并返回总和为 target 的元素组合的个数. 题目数据保证 ...

  5. vue平铺日历组件之按住ctrl、shift键实现跨月、跨年多选日期的功能

    已经好久没有更新过博客了,大概有两三年了吧,因为换了工作,工作也比较忙,所以也就没有时间来写技术博客,期间也一直想写,但自己又比较懒,就给耽误了.今天这篇先续上,下一篇什么时候写,我也不知道,随心所欲 ...

  6. 【原创】浅谈EtherCAT主站EOE(上)-EOE网络

    这篇文章的标题虽然是关于EtherCAT EOE,但其实主要内容是关于整个EOE网络结构,属于计算机网络原理.而EtherCAT EoE只是简单介绍,并不是文章的重点.需要注意的是,我们的描述主要基于 ...

  7. 从源码角度剖析 golang 如何fork一个进程

    从源码角度剖析 golang 如何fork一个进程 创建一个新进程分为两个步骤,一个是fork系统调用,一个是execve 系统调用,fork调用会复用父进程的堆栈,而execve直接覆盖当前进程的堆 ...

  8. kprobe_events shell模式使用教程

    kprobe_events shell模式使用教程 kprobe 使用前提 需要内核启用以下配置 CONFIG_KPROBES=y CONFIG_HAVE_KPROBES=y CONFIG_KPROB ...

  9. 2023-06-24：给你一根长度为 n 的绳子， 请把绳子剪成整数长度的 m 段， m、n都是整数，n ＞ 1并且m ＞ 1， 每段绳子的长度记为 k[0],k[1]...k[m - 1]。 请问

    2023-06-24:给你一根长度为 n 的绳子, 请把绳子剪成整数长度的 m 段, m.n都是整数,n > 1并且m > 1, 每段绳子的长度记为 k[0],k[1]...k[m - 1 ...

  10. 《最新出炉》系列初窥篇-Python+Playwright自动化测试-4-playwright等待浅析

    1.简介 在介绍selenium的时候,宏哥也介绍过等待,是因为在某些元素出现后,才可以进行操作.有时候我们自己忘记添加等待时间后,查了半天代码确定就是没有问题,奇怪的就是获取不到元素.然后搞了好久, ...