表格技术七十二变|手把手教你用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的那种效果。同时，也解决了咱们在文章开头中提到缘留白、图片跨越、页面滚动后截图不全三个问题。

咱们接下来还会为你们带来更多在工做项目中遇到的有趣内容。

来都来了，点个赞再走吧~