表格技術七十二變|手把手教你用Canvas電子表格作電子簽名

時間 2021-08-11

標籤 javascript css html 前端 java node json canvas 服務器 dom 欄目 JavaScript 简体版

原文原文鏈接

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。javascript

平常生活工做學習中，你們對電子表格一定不陌生。從工做數據彙總分析到出門收據各類電子發票，這些都是由電子表格製做出來的。css

不過你們對電子表格的印象可能停留在這裏：html

標準行列數據統計的表格樣式。前端

但其實，表格也能夠是這樣的：java

工做中遇到須要實現的表格狀況每每比你們想象的要更加複雜，最近咱們在作客戶支持的工做過程當中遇到了一個客戶，他須要藉助電子表格表格實現合同中的電子簽名。node

電子簽名通俗來講就是經過技術手段實如今電子文檔上加載電子形式的簽名，其做用相似於紙質合同上的手寫簽名或加蓋的公章。在企業工做流審批、請柬、單據保全等場景應用普遍。json

在經濟活躍跨區域化現象愈來愈多的今天，做爲電子表格的一個重要使用場景，電子合同能夠實現異地簽約，簽署的時間第點更加自由；面對大批量的合同簽署也能夠輕鬆解決；同時傳統紙質合同的管理更加方便，避免了紙質合同因保存管理問題而出現損壞。canvas

而今天，客戶在實際項目中須要實現的內容長這樣：服務器

看到這裏，有些小夥伴可能會說這有什麼難的，雖然這個東西長相酷似word，dom

但不就是電子表格去掉邊框線嗎？

若是隻是簡單的表格框內容，下段代碼就能夠簡單的實現表格的繪製。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>02Canvas案例-繪製表格</title>

</head>

<body>

<div id="container">

    <canvas id="cavsElem">

        

    </canvas>

</div>

<script>

    (function(){

        var canvas=document.querySelector('#cavsElem');

        var ctx=canvas.getContext('2d');

        canvas.width=600;

        canvas.height=600;

        canvas.style.border='1px solid green';

        var rectH=10;

        var rectW=20;

        ctx.lineWidth=.5;

        //繪製表格

        // 第一步： 繪製橫線

        for(var i=0;i<canvas.width;i++){

            ctx.moveTo(rectW*i,0);

            //若是不設置moveTo，當前畫筆沒有位置

            ctx.lineTo(rectW*i,canvas.height);

        }

        //第二步：繪製豎線：若是繪製的格子的寬高相等，能夠將for循環放到一個裏面；

        for(var i=0;i<canvas.height;i++){

            ctx.moveTo(0,rectH*i);

            ctx.lineTo(canvas.width,rectH*i);

        }

        ctx.stroke();

    }())

</script>

</body>

</html>

可是放大仔細看看，就會發現狀況並不如咱們所想的這麼簡單。

在這個合同中，咱們除了要隱藏邊框線，還要考慮邊緣留白、圖片跨越、頁面滾動後截圖不全等問題。而藉助電子表格在數據處理和分析方面天生具有的優點，能夠很容易的實現電子簽名功能。

咱們今天就一塊兒來嘗試經過基於Canvas的電子表格來實現電子簽名並導出PDF的項目開發需求。

實現思路

環境準備

1. 環境準備：安裝SpreadJS 前端表格插件，並經過插件繪製canvas畫布。

初始化Spread工做簿，並導入合同模板
建立Canvas畫布並引用esign.js畫法實現手寫簽名區域
經過自定義超連接跳轉命令，簽名區域呼出
將簽名區域轉化爲圖片設置爲背景圖片
使用SpreadJS提供的導出PDF接口將簽署的文件導出

電子簽名的實現

初始化Spread工做簿

一、引入如下文件

<link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">

<script src="node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>

<script src="new2.ssjson" type="text/javascript"></script>

一、建立用於承載SpreadJS的DOM

<div id="ss" class="sample-spreadsheets" style="height: 900px;">

二、用JS獲取DOM對象並進行初始化

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

三、導入合同模板

spread.fromJSON(str);

到這裏，咱們Spread工做簿已經初始化完成了。固然，你也能夠添加對應的CSS調整表單的大小。

關於模板的製做，你能夠在在線表格編輯器中根據需求進行繪製，並導出爲ssjson文件並經過fromJSON導入到咱們的表單中。

接下來，用Canvas畫布來實現手寫簽名區域。

手寫簽名區域

一、首先，咱們先建立簽名區域的DOM元素，並定義一個Canvas畫布，默認狀況下不顯示。

<div class="containter" id="box" style="display: none;">

       <div class="canvasDiv">

             <div id="editing_area">

                  <canvas id="canvasEdit"></canvas>

             </div>

       </div>

       <div class="btnDiv">

             <a id="sign_clear" class="clearBtn">清空</a>

             <a id="sign_clear2" class="clearBtn">簽署</a>

       </div>

</div>

二、引用esign.js和jQuery。Esign.js是一種用鼠標在canvas上繪製的畫法。

三、初始化
`
$(document).esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");

$(document).on('click', '#sign_clear2', takeScreenshot);`

Canvas畫布中利用自定義單元格，理論上也是能開發出可以直接簽名的單元格。

用戶能夠直接在單元格進行簽名，有興趣的小夥伴能夠嘗試用自定義單元格實現。

自定義超連接命令

一、建立超連接

sheet.setValue(32, 10, "審覈人簽名:")

sheet.setHyperlink(32, 10, { command: "popup" });

二、爲超連接設置命令，點擊彈出畫布

spread.commandManager().register("popup",{

                    canUndo: true,

                    execute: function (context, options, isUndo) {

                    var Commands = GC.Spread.Sheets.Commands;

                    // 在此加cmd

                    options.cmd = "popup";

                    if (isUndo) {

                           Commands.undoTransaction(context, options);

                                  return true;

                           } else {

                                  Commands.startTransaction(context, options);

 

                                 document.getElementById("box").style.display = "block";

 

                                  Commands.endTransaction(context, options);

                                        return true;

                                  }

                           }

                });

指定DOM轉爲圖片並設置爲單元格背景

一、利用canvas的接口，將畫布轉爲base64，調用接口設置背景

function convertCanvasToImage(canvas) {

                    return canvas.toDataURL("image/png");

   };

 

  function takeScreenshot() {       

      var canvas = document.getElementById("canvasEdit");

      var imgUrl = convertCanvasToImage(canvas); //截取圖片路徑,該路徑爲服務器參數

      var sheet = spread.getSheet(0); 

      sheet.getCell(32,13).backgroundImage(imgUrl);

      sheet.getCell(35,13).backgroundImage(imgUrl);

      sheet.getCell(38,13).backgroundImage(imgUrl);

}

二、關閉簽名畫布

function tishi(){

      document.getElementById("box").style.display = "none";

}

setTimeout(tishi,100)

將電子簽名導出PDF

上面已經實現了電子簽名內容，可是咱們都知道合同須要有打印輸出功能，接下來咱們繼續介紹如何使用pdf打印輸出電子簽名。

一、引用PDF拓展文件以及filesaver

<script src="node_modules/@grapecity/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>

<script src="node_modules/file-saver/dist/FileSaver.min.js" type="text/javascript"></script>

一、調用接口導出PDF

spread.savePDF(function (blob) {

    var fileName = 'download';

    saveAs(blob, fileName + '.pdf');

}, function (error) {

    console.log(error);

}, {

    title: 'Test Title',

});

注意：導出中文字符須要註冊對應的字體。

總結

以上，咱們實現了基於Canvas電子表格實現電子簽名並使用PDF導出打印的完整功能，因爲Canvas徹底取代了頁面的dom結構，所以打印時不須要遍歷要打印的dom節點的子節點，也沒必要將每一頁所能打印的dom節點高度累加，這樣作能夠不用再計算dom節點的高度，大幅節省了系統性能，同時實現了較細的頁面顆粒度，不會形成大塊空白的狀況，徹底模擬出了word生成pdf的那種效果。同時，也解決了咱們在文章開頭中提到緣留白、圖片跨越、頁面滾動後截圖不全三個問題。

咱們接下來還會爲你們帶來更多在工做項目中遇到的有趣內容。

來都來了，點個贊再走吧~