In this article I will explain with an example, how to convert (export) JSON string as PDF using JavaScript.
The JSON string will be converted into a JSON object. The data from the JSON object will be used to populate an HTML Table and later the HTML Table will be downloaded (exported) as PDF file using the pdfmake plugin in JavaScript.
 
 
HTML Markup
The following HTML Markup consists of an HTML DIV and a Button. The HTML Button has been assigned an OnClick event handler which calls the Export JavaScript function.
<input type="button" value="Export" onclick="Export()" />
<hr />
<div id="dvTable"></div>
 
 
JavaScript function to convert (export) JSON string as PDF
Inside the Export JavaScript function, the JSON string is converted into a JSON object using the eval JavaScript function.
The JSON objects contains an Array of values corresponding to the Table Header and Cell values.
HTML Table
First a dynamic HTML Table is created using JavaScript createElement method.
 
Adding the Header Row
The Header Row will be built using the first element of the JSON Array as it contains the Header column text values.
First a row is inserted into the Table and then using the count of columns a loop is executed and one by one Table TH element is created using the createElement method.
Table insertRow Method: This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position.
 
Adding the Data Rows
A loop is executed over the array elements and one by one a Row is created in the HTML Table. Then inside each Row a Cell is added using the Table insertCell method.
Table Row insertCell Method: This method adds a new cell to a Table Row at the specified index. If the index is supplied as -1 then the row will be added at the last position.
 
Adding the dynamic Table to the Page
Finally the dynamically created table is added to the page by appending it to the HTML DIV using the appendChild method.
Note: You can also append an element to the body but then you won’t be able to set its placement on the page. Using a container such a DIV helps us add the dynamic element to the desired place.
 
Finally, the HTML Table is converted into a HTML5 Canvas using html2canvas plugin and then the HTML5 Canvas will be exported to PDF using the pdfmake plugin and the HTML Table is removed from the HTML DIV using JavaScript.
<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>
<script type="text/javascript">
    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);
 
        //Convert JSON to HTML Table.
        var table = document.createElement("TABLE");
        table.border = "1";
        table.Id = "tblCustomers";
 
        //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);
        }
 
        //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];
            }
        }
 
        //Append the Table to the HTML DIV.
        var dvTable = document.getElementById("dvTable");
        dvTable.innerHTML = "";
        dvTable.appendChild(table);
 
 
        //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 = "";
            }
        });
    }
</script>
 
 
Screenshots
The JSON string being exported to PDF
Convert (Export) JSON string as PDF using JavaScript
 
The generated PDF file
Convert (Export) JSON string as PDF using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code