jsPDF addHTML() Convert HTML Tables to PDF Using JavaScript

In this tutorial, I will guide you on how to convert HTML tables to PDF document using jspdf library and its addhtml() method in JavaScript. Basically, the jsPDF addHTML() function accepts HTML5 code using its first parameter. It then converts the HTML5 code to PDF and gives us the option to download the PDF file using the callback function as the second parameter.

The complete source code of this project is available in this article. So, you can easily download and run it on your computer.

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>

<div id="customers">
  <table id="tab_customers" class="table">
        <thead>
            <tr class='warning'>
                <th>Region</th>
                <th>Peril</th>
                <th>Std Dev</th>
                <th>Expected Loss</th>
                <th>1% (100 yrs) TVAR</th>
                <th>4% (250 yrs) TVAR</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>All Region</td>
                <td>All Peril</td>
                <td>1,363,480,000</td>
                <td>10,907,648,067</td>
                <td>10,907,648,067</td>
                <td>10,907,648,067</td>
            </tr>
            <tr>
                <td>NA_CUSTOM (CUSTOM)</td>
                <td>Earthquake</td>
                <td>100,363,480,000</td>
                <td>10,907,648,067</td>
                <td>10,907,648,067</td>
                <td>10,907,648,067</td>
            </tr>
            <tr>
                <td>All</td>
                <td>All</td>
                <td>1,363</td>
                <td>10,907</td>
                <td>10,907</td>
                <td>907.32</td>
            </tr>
            <tr>
                <td>NA_CUSTOM</td>
                <td>EQ</td>
                <td>1,363</td>
                <td>10,907</td>
                <td>10,907</td>
                <td>907.32</td>
            </tr>
        </tbody>
    </table>
</div>

<button >

style.css

body{padding:0; margin:0;}
#tab_customers{background:#fff;}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
/*   width: 50%; */}

script.js

function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'A3');
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#customers')[0];
    
    pdf.addHTML(source,function() {
    pdf.save('PDF_'+ Math.random().toString(36).slice(2) +'.pdf');
});
}

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.