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單元格中添加手寫簽名的功能，右鍵菜單選擇手寫簽名後會調用對應的簽名插件，在簽名插件上可以用鼠標進行輸入，輸入完之後點擊確認就會顯示在單元格中。