PDFMake.js + Html2canvas Tutorial to Export JSON Strings & Objects to HTML5 Table in PDF Document Using Javascript

Welcome folks today in this blog post we will be exporting raw json string or objects to html5 table in pdf document using pdfmake.js and html2canvas.js library in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to include the cdn of pdfmake.js library and also you need to include the cdn of html2canvas.js library as well as shown below

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

1 2	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

And now we will be having a simple button to export the json data to pdf document. Copy paste the code inside the body of the html document

<input type="button" value="Export" onclick="Export()" />
<hr />
<div id="dvTable"></div>

<hr />

As you can see we have the pdf export button and also we have the div section where we will be rendering the table and then we will automatically take the screenshot of the table using the html2canvas.js library and then insert that screenshot into the pdf document as shown below

As you can see we have attached the onclick attribute to the button. When we click the button we need to execute Export() method to actually render the table in pdf document from json object.

function Export() {
        //The JSON string.
        var json = '[["Customer Id","Name","Country"],[1,"John Hammond","United States"],[2,"Mudassar Khan","India"],[3,"Suzanne Mathews","France"],[4,"Robert Schidner","Russia"]]';
 
        //Convert JSON string to JSON object.
        var customers = eval(json);
}

function Export() {

//The JSON string.

var json = '[["Customer Id","Name","Country"],[1,"John Hammond","United States"],[2,"Mudassar Khan","India"],[3,"Suzanne Mathews","France"],[4,"Robert Schidner","Russia"]]';

//Convert JSON string to JSON object.

var customers = eval(json);

}

Firstly as you can see we are declaring the json string which contains the array of records which contains the following properties which is the customer id, name and country. And we have two records. Now in the next step we are converting the json string to json objects using the eval() method in javascript.

Creating the Dynamic Table

Now we will be creating the dynamic html5 table using javascript. For this we will be using the createElement() method to actually create the DOM element of table as shown below

 //Convert JSON to HTML Table.
 var table = document.createElement("TABLE");
 table.border = "1";
 table.Id = "tblCustomers";

//Convert JSON to HTML Table.

var table = document.createElement("TABLE");

table.border = "1";

table.Id = "tblCustomers";

For this we are setting some properties of the table which is the border and the actual id as well. We will use this unique id that is given here when we try to export this table to pdf document later on.

Adding the Header Rows & Columns

Now we will be adding the header row which will contain all the columns for this table. Here as you can see we have three properties that we need to add to the table.

 //Get the count of columns.

        var columnCount = customers[0].length;
 
        //Add the header row.
        var row = table.insertRow(-1);
        for (var i = 0; i < columnCount; i++) {
            var headerCell = document.createElement("TH");
            headerCell.innerHTML = customers[0][i];
            row.appendChild(headerCell);
        }

//Get the count of columns.

var columnCount = customers[0].length;

//Add the header row.

var row = table.insertRow(-1);

for (var i = 0; i < columnCount; i++) {

var headerCell = document.createElement("TH");

headerCell.innerHTML = customers[0][i];

row.appendChild(headerCell);

}

As you can see in the above code we are first of all adding the header row inside the table using the insertRow() method and then we will be calculating the number of columns using the length property . And then we are using the for loop to actually add all the columns. Inside this loop we are changing the innerHTML and also appending the child of the header row.

Adding the Data Rows in Table

Now we will be adding the rows inside the table. We will be fetching the json data from the json object as shown below

//Add the data rows.
        for (var i = 1; i < customers.length; i++) {
            row = table.insertRow(-1);
            for (var j = 0; j < columnCount; j++) {
                var cell = row.insertCell(-1);
                cell.innerHTML = customers[i][j];
            }
        }

//Add the data rows.

for (var i = 1; i < customers.length; i++) {

row = table.insertRow(-1);

for (var j = 0; j < columnCount; j++) {

var cell = row.insertCell(-1);

cell.innerHTML = customers[i][j];

}

As you can see in the above code we are using the for loop we are using the insertRow() method to actually insert the row at the specified position. And then we are appending the columns using the second for loop. And then we are using the insertCell() method and also manipulating the innerHTML property of the row cell.

Append the Table inside the DOM

Now we will be appending the html5 table to the DOM using the appendChild() method. First of all we are getting the reference of the table element using it’s id.

//Append the Table to the HTML DIV.
var dvTable = document.getElementById("dvTable");

dvTable.innerHTML = "";

dvTable.appendChild(table);

//Append the Table to the HTML DIV.

var dvTable = document.getElementById("dvTable");

dvTable.innerHTML = "";

dvTable.appendChild(table);

Capturing the HTML Table Screenshot

Now we will be capturing the html5 table screenshot using the html2canvas.js library as shown below

//Convert Table to PDF.
        html2canvas(document.getElementById('dvTable'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500
                    }]
                };
                pdfMake.createPdf(docDefinition).download("JSON.pdf");
 
                //Remove the Table.
                dvTable.innerHTML = "";
            }
        });

//Convert Table to PDF.

html2canvas(document.getElementById('dvTable'), {

onrendered: function (canvas) {

var data = canvas.toDataURL();

var docDefinition = {

content: [{

image: data,

width: 500

}]

};

pdfMake.createPdf(docDefinition).download("JSON.pdf");

//Remove the Table.

dvTable.innerHTML = "";

}

});

As you can see we are using the html2canvas library and inside it we are passing the reference of the html table using it’s id. And then we are taking the screenshot of the canvas. And inside the callback function we have the onrendered callback function inside it we have the canvas property. And then we are defining the document definition for the pdf document. And then inside the content we have the image and also we are defining the width of the table screenshot. And then we are calling the pdfMake createPdf() method and inside it we are passing the docDefinition object and then we are downloading the pdf document as an attachment using the download() method.