Convert Export HTML Table to PDF file using JavaScript

In this article I will explain with an example, how to convert (export) HTML Table to PDF file using JavaScript.

The HTML Table will be first converted into a HTML5 Canvas using html2canvas plugin and then the HTML5 Canvas will be exported to PDF file using the pdfmake plugin in JavaScript.

HTML Markup

The following HTML Markup consists of an HTML Table and a Button.

<head>

body

{

font-family: Arial;

font-size: 10pt;

}

table

{

border: 1px solid #ccc;

border-collapse: collapse;

}

table th

{

background-color: #F7F7F7;

color: #333;

font-weight: bold;

}

table th, table td

{

padding: 5px;

border: 1px solid #ccc;

}

</style>

</head>

<body>

<tr>

<th>Customer Id</th>

<th>Country</th>

</tr>

<tr>

<td>John Hammond</td>

<td>United States</td>

</tr>

<tr>

<td>Mudassar Khan</td>

<td>India</td>

</tr>

<tr>

<td>Suzanne Mathews</td>

<td>France</td>

</tr>

<tr>

<td>Robert Schidner</td>

<td>Russia</td>

</tr>

</table>

<br />

function Export() {

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

onrendered: function (canvas) {

var data = canvas.toDataURL();

var docDefinition = {

content: [{

image: data,

width: 500

}]

};

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

}

});

}

</script>

</body>

</html>

Explanation:

When the Export Button is clicked, the Export JavaScript function gets called.

Inside the Export function, 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.

Screenshots

The HTML Table