The official website of Grape City, grape city for developers to provide professional development tools, solutions and services, enabling developers.

In daily life, work and study, we must be familiar with spreadsheets. Spreadsheets produce everything from summaries and analyses of work data to electronic invoices for outgoing receipts.

But that’s where your impression of a spreadsheet might end:

Table style for standard column data statistics.

 

But a table could also look like this:

The forms that need to be implemented at work are often more complex than you might think. Recently, in our customer support work, we met a client who needed to use a spreadsheet to implement the electronic signature of a contract.

In general, electronic signature means to load electronic signature on electronic document by technical means. Its function is similar to handwritten signature or official seal on paper contract. It is widely used in enterprise workflow approval, invitations, document preservation and other scenarios.

Nowadays, with more and more economic activity and cross-regionalization, as an important application scenario of electronic forms, electronic contracts can be signed in different places, and the signing time is more free. In the face of large quantities of contract signing can also be easily solved; At the same time, the management of traditional paper contracts is more convenient, avoiding the damage of paper contracts due to preservation and management problems.

 

Today, what customers need to implement in a real project looks like this:

Now, some of you might say, what’s so hard about this? Even though it looks like Word,

But isn’t that just a spreadsheet with the border lines removed?

If only a simple table box content, the next section of code can be simple to achieve the table drawing.

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title>02Canvas case - Draw table </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); Ctx.lineto (rectW* I,canvas.height); ctx.lineto (rectW* I,canvas.height); } // Step 2: Draw vertical lines: If the width and height of the drawn cells are equal, you can put the for loop inside one; for(var i=0; i<canvas.height; i++){ ctx.moveTo(0,rectH*i); ctx.lineTo(canvas.width,rectH*i); } ctx.stroke(); }()) </script> </body> </html>Copy the code

But a closer look reveals that the situation is not as simple as we might think.

In this contract, in addition to hiding border lines, we also had to consider margin padding, image spans, and incomplete screenshots after scrolling. With the advantage of spreadsheet in data processing and analysis, electronic signature can be easily implemented.

 

Today we are going to try to implement electronic signature and PDF export of project development requirements through a Canvas based spreadsheet.

Implementation approach

Environment to prepare

1. Environment preparation: Install SpreadJS front-end table plug-in and use the plug-in to draw canvas canvas.

  1. Initialize the Spread workbook and import the contract template

  2. Create a Canvas Canvas and use the esign.js drawing method to implement a handwritten signature area

  3. You can use the user-defined hyperlink forward command to call out the signature area

  4. Converts the signature area to a picture setting the background image

  5. Export signed files using the PDF export interface provided by SpreadJS

The realization of electronic signature

Initialize the Spread workbook

1. Introduce the following files

<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>
Copy the code

Create a DOM to host SpreadJS

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

2. Get the DOM object with JS and initialize it

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

3. Import the contract template

spread.fromJSON(str);

At this point, our Spread workbook has been initialized. Of course, you can also add corresponding CSS to resize the form.

For templates, you can draw them as required in the online table editor, export them as ssjson files and import them fromJSON into our form.

Next, use Canvas Canvas to implement the handwritten signature area.

Handwritten signature area

1. First, we create a DOM element for the signature area and define a Canvas Canvas that is not displayed by default.

<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" > clear < / a > < a id = "sign_clear2" class = "clearBtn" > sign < / a > < / div > < / div >Copy the code

2. Reference esign.js and jQuery. Esign.js is a drawing method that uses the mouse to draw on canvas.

`

 

$(document). Esign (“canvasEdit”, “sign_show”, “sign_clear”, “sign_OK “);

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

 

Using custom cells in a Canvas, it is theoretically possible to develop cells that can be signed directly.

Users can directly sign in the cell, interested partners can try to use custom cell implementation.

 

Custom hyperlink command

1. Create hyperlinks

Sheet. SetValue (32, 10, "checker signature :") sheet. SetHyperlink (32, 10, {command: "popup"});Copy the code

 

2. Set the command for the hyperlink and click to pop up the canvas

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;

                                  }

                           }

                });
Copy the code

Specifies that the DOM is converted to a picture and set to the cell background

1. Use the canvas interface to convert the canvas into Base64 and call the interface to set the background

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). The backgroundImage (imgUrl); Sheet. GetCell (35, 13). The backgroundImage (imgUrl); Sheet. GetCell (38, 13). The backgroundImage (imgUrl); }Copy the code

2. Close the signature canvas


function tishi(){

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

}

setTimeout(tishi,100)
Copy the code

Export electronic signatures to PDF

Electronic signature content has been implemented above, but we all know that contracts need to have printouts, so we will continue to show how to print electronic signatures using PDF.

 

1. Use PDF extensions and 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>

Copy the code

 

1. Invoke the interface to export PDF

spread.savePDF(function (blob) {

    var fileName = 'download';

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

}, function (error) {

    console.log(error);

}, {

    title: 'Test Title',

});
Copy the code

 

Note: To export Chinese characters, you need to register corresponding fonts.

conclusion

Above, we have realized the complete function of electronic signature based on Canvas spreadsheet and printing with PDF export. Since Canvas completely replaces the DOM structure of the page, there is no need to traverse the child nodes of dom nodes to be printed, and there is no need to accumulate the DOM nodes that can be printed on each page. This can no longer calculate the height of the DOM node, greatly saving system performance, while achieving a fine page granularity, does not cause large blank situation, completely mimicking the effect of Word to generate PDF. At the same time, it also solves the three problems mentioned in the beginning of the article, such as margin blank, picture span and incomplete screenshots after page scrolling.

We’ll be back with some more interesting things you’ve encountered on your work projects.

 

Here you are, give me a thumbs up and then go