关于前端:表格技术七十二变手把手教你用Canvas电子表格做电子签名

转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。

日常生活工作学习中，大家对电子表格必然不生疏。从工作数据汇总剖析到出门收据各种电子发票，这些都是由电子表格制作进去的。

不过大家对电子表格的印象可能停留在这里：

规范行列数据统计的表格款式。

但其实，表格也能够是这样的：

工作中遇到须要实现的表格状况往往比大家设想的要更加简单，最近咱们在做客户反对的工作过程中遇到了一个客户，他须要借助电子表格表格实现合同中的电子签名。

电子签名艰深来说就是通过技术手段实现在电子文档上加载电子模式的签名，其作用相似于纸质合同上的手写签名或加盖的公章。在企业工作流审批、请柬、单据顾全等场景利用宽泛。

在经济沉闷跨区域化景象越来越多的明天，作为电子表格的一个重要应用场景，电子合同能够实现异地签约，签订的工夫第点更加自在；面对大批量的合同签订也能够轻松解决；同时传统纸质合同的治理更加不便，防止了纸质合同因保留治理问题而呈现损坏。

而明天，客户在理论我的项目中须要实现的内容长这样：

看到这里，有些小伙伴可能会说这有什么难的，尽管这个货色长相酷似 word，

但不就是电子表格去掉边框线吗？

如果只是简略的表格框内容，下段代码就能够简略的实现表格的绘制。

<!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 接口将签订的文件导出

1、引入以下文件

<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>

1、创立用于承载 SpreadJS 的 DOM

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

2、用 JS 获取 DOM 对象并进行初始化

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

3、导入合同模板

spread.fromJSON(str);

到这里，咱们 Spread 工作簿曾经初始化实现了。当然，你也能够增加对应的 CSS 调整表单的大小。

对于模板的制作，你能够在在线表格编辑器中依据需要进行绘制，并导出为 ssjson 文件并通过 fromJSON 导入到咱们的表单中。

接下来，用 Canvas 画布来实现手写签名区域。

1、首先，咱们先创立签名区域的 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>

2、援用 esign.js 和 jQuery。Esign.js 是一种用鼠标在 canvas 上绘制的画法。

`<script type=”text/javascript” src=”js/esign.js”></script>

3、初始化
`
$(document).esign(“canvasEdit”, “sign_show”, “sign_clear”, “sign_ok”);

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

Canvas 画布中利用自定义单元格，实践上也是能开发出可能间接签名的单元格。

用户能够间接在单元格进行签名，有趣味的小伙伴能够尝试用自定义单元格实现。

1、创立超链接

sheet.setValue(32, 10, "审核人签名:")

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

2、为超链接设置命令，点击弹出画布

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;

                                  }

                           }

                });

1、利用 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);

}

2、敞开签名画布


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

}

setTimeout(tishi,100)

下面曾经实现了电子签名内容，然而咱们都晓得合同须要有打印输出性能，接下来咱们持续介绍如何应用 pdf 打印输出电子签名。

1、援用 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>

1、调用接口导出 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 的那种成果。同时，也解决了咱们在文章结尾中提到缘留白、图片逾越、页面滚动后截图不全三个问题。

咱们接下来还会为大家带来更多在工作我的项目中遇到的乏味内容。

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

关于前端:表格技术七十二变手把手教你用Canvas电子表格做电子签名

实现思路

环境筹备

电子签名的实现

初始化 Spread 工作簿

手写签名区域

自定义超链接命令

指定 DOM 转为图片并设置为单元格背景

将电子签名导出 PDF

总结