Export HTML Table to PDF using jQuery

Pradeep Maurya

5 years ago

How to convert or export HTML table to pdf using jQuery is a big problem for Web Application Developers and every time they look for appropriate solutions, so After reviewing this post you’ll not take more than 5 minutes to export HTML table to PDF using jquery. You don’t need to download fpdf library file and include it in your file. Here I am going to explain an easy way to export HTML table to pdf using jQuery with example.

Also Read: How to convert HTML to PDF file in PHP

Here we will use two library html2canvas and pdfmake to complete our requirement. First, html2canva will convert HTML Table into an HTML5 Canvas then pdfmake will export HTML5 Canvas to PDF file.

Let’s see this functionality using a code example. so that it will be more helpful and easy to understand by everyone.

Create an index.html file

A HTML table and a button are included in the following HTML code.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Convert or Export HTML Table to PDF file using jQuery | Tutorialswebsite</title>
     <style type="text/css">
        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>
     <table id="tblCustomers" cellspacing="0" cellpadding="0">
        <tr>
            <th>Customer Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Address</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John </td>
            <td>jhon@gmail.com</td>
            <td>0445607456</td>
            <td>United States</td>
        </tr>
        <tr>
              <td>2</td>
            <td>Rohan </td>
            <td>rohan@gmail.com</td>
            <td>0545607456</td>
            <td>Bangluru</td>
        </tr>
        <tr>
              <td>3</td>
            <td>Pradeep </td>
            <td>pradeep@gmail.com</td>
            <td>0996507456</td>
            <td>Delhi</td>
        </tr>
        <tr>
             <td>4</td>
            <td>Sonia </td>
            <td>sonia@gmail.com</td>
            <td>07899607456</td>
            <td>Varanasi</td>
        </tr>
    </table>
    <br />
    <input type="button" id="btnExport" value="Export" />
    
</body>
</html>

<head>

<title>Convert or Export HTML Table to PDF file using jQuery | Tutorialswebsite</title>

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>Email</th>

<th>Phone</th>

<th>Address</th>

</tr>

<tr>

<td>jhon@gmail.com</td>

<td>United States</td>

</tr>

<tr>

<td>Rohan </td>

<td>rohan@gmail.com</td>

<td>Bangluru</td>

</tr>

<tr>

<td>Pradeep </td>

<td>pradeep@gmail.com</td>

<td>Delhi</td>

</tr>

<tr>

<td>Sonia </td>

<td>sonia@gmail.com</td>

<td>Varanasi</td>

</tr>

</table>

<br />

</body>

</html>

Now we will include or add below jQuery plugin library in index.html file


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>

Export HTML table to PDF using jQuery

Now we will add below jquery function code, which will work on button click to export HTML table to pdf file.


<script type="text/javascript">
        $("body").on("click", "#btnExport", function () {
            html2canvas($('#tblCustomers')[0], {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    var docDefinition = {
                        content: [{
                            image: data,
                            width: 500
                        }]
                    };
                    pdfMake.createPdf(docDefinition).download("customer-details.pdf");
                }
            });
        });
    </script>

$("body").on("click", "#btnExport", function () {

html2canvas($('#tblCustomers')[0], {

onrendered: function (canvas) {

var data = canvas.toDataURL();

var docDefinition = {

content: [{

image: data,

width: 500

}]

};

pdfMake.createPdf(docDefinition).download("customer-details.pdf");

}

});

</script>

Complete code

Now, you can find below complete code to provide the functionality to export HTML Table to PDF file using jQuery.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Convert or Export HTML Table to PDF file using jQuery | Tutorialswebsite</title>
     <style type="text/css">
        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>
     <table id="tblCustomers" cellspacing="0" cellpadding="0">
        <tr>
            <th>Customer Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Address</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John </td>
            <td>jhon@gmail.com</td>
            <td>0445607456</td>
            <td>United States</td>
        </tr>
        <tr>
              <td>2</td>
            <td>Rohan </td>
            <td>rohan@gmail.com</td>
            <td>0545607456</td>
            <td>Bangluru</td>
        </tr>
        <tr>
              <td>3</td>
            <td>Pradeep </td>
            <td>pradeep@gmail.com</td>
            <td>0996507456</td>
            <td>Delhi</td>
        </tr>
        <tr>
             <td>4</td>
            <td>Sonia </td>
            <td>sonia@gmail.com</td>
            <td>07899607456</td>
            <td>Varanasi</td>
        </tr>
    </table>
    <br />
    <input type="button" id="btnExport" value="Export" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <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">
        $("body").on("click", "#btnExport", function () {
            html2canvas($('#tblCustomers')[0], {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    var docDefinition = {
                        content: [{
                            image: data,
                            width: 500
                        }]
                    };
                    pdfMake.createPdf(docDefinition).download("cutomer-details.pdf");
                }
            });
        });
    </script>
</body>
</html>

<head>

<title>Convert or Export HTML Table to PDF file using jQuery | Tutorialswebsite</title>

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>Email</th>

<th>Phone</th>

<th>Address</th>

</tr>

<tr>

<td>jhon@gmail.com</td>

<td>United States</td>

</tr>

<tr>

<td>Rohan </td>

<td>rohan@gmail.com</td>

<td>Bangluru</td>

</tr>

<tr>

<td>Pradeep </td>

<td>pradeep@gmail.com</td>

<td>Delhi</td>

</tr>

<tr>

<td>Sonia </td>

<td>sonia@gmail.com</td>

<td>Varanasi</td>

</tr>

</table>

<br />

$("body").on("click", "#btnExport", function () {

html2canvas($('#tblCustomers')[0], {

onrendered: function (canvas) {

var data = canvas.toDataURL();

var docDefinition = {

content: [{

image: data,

width: 500

}]

};

pdfMake.createPdf(docDefinition).download("cutomer-details.pdf");

}

});

</script>

</body>

</html>

Now after clicking on the Export button, you will get your HTML table data into a pdf file. The PDF file will download on your system automatically with the name you will define in the jquery button click function.

View Demo

Download Code

Also Read: How to Convert HTML to PDF in CodeIgniter using Dompdf Library

Conclusion

I hope you found this tutorial helpful for your project. Convert or Export HTML table to PDF using jQuery is an important feature for any web application. So here we are, completed the basic step using html2canvas and pdfmake library.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co