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

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

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

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

 

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

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

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

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

 

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

看到这里，有些小伙伴可能会说这有什么难的，尽管这个货色长相酷似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画布。

  1. 初始化Spread工作簿，并导入合同模板
  2. 创立Canvas画布并援用esign.js画法实现手写签名区域
  3. 通过自定义超链接跳转命令，签名区域呼出
  4. 将签名区域转化为图片设置为背景图片
  5. 应用SpreadJS提供的导出PDF接口将签订的文件导出

电子签名的实现

初始化Spread工作簿

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>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.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;                                  }                           }                });

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

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

下面曾经实现了电子签名内容，然而咱们都晓得合同须要有打印输出性能，接下来咱们持续介绍如何应用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的那种成果。同时，也解决了咱们在文章结尾中提到缘留白、图片逾越、页面滚动后截图不全三个问题。

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

 

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