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
HTML
x
56
56
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>2
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>3
<link type="text/css" rel="stylesheet" href="style.css"/>4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>5
<script src="script.js"></script>6
7
<div id="customers">8
<table id="tab_customers" class="table">9
<thead>10
<tr class='warning'>11
<th>Region</th>12
<th>Peril</th>13
<th>Std Dev</th>14
<th>Expected Loss</th>15
<th>1% (100 yrs) TVAR</th>16
<th>4% (250 yrs) TVAR</th>17
</tr>18
</thead>19
<tbody>20
<tr>21
<td>All Region</td>22
<td>All Peril</td>23
<td>1,363,480,000</td>24
<td>10,907,648,067</td>25
<td>10,907,648,067</td>26
<td>10,907,648,067</td>27
</tr>28
<tr>29
<td>NA_CUSTOM (CUSTOM)</td>30
<td>Earthquake</td>31
<td>100,363,480,000</td>32
<td>10,907,648,067</td>33
<td>10,907,648,067</td>34
<td>10,907,648,067</td>35
</tr>36
<tr>37
<td>All</td>38
<td>All</td>39
<td>1,363</td>40
<td>10,907</td>41
<td>10,907</td>42
<td>907.32</td>43
</tr>44
<tr>45
<td>NA_CUSTOM</td>46
<td>EQ</td>47
<td>1,363</td>48
<td>10,907</td>49
<td>10,907</td>50
<td>907.32</td>51
</tr>52
</tbody>53
</table>54
</div>55
56
<button onclick="javascript:demoFromHTML();">PDF</button>style.css
CSS
1
8
1
body{padding:0; margin:0;}2
#tab_customers{background:#fff;}3
.center {4
display: block;5
margin-left: auto;6
margin-right: auto;7
/* width: 50%; */8
}script.js
JavaScript
1
10
10
1
function demoFromHTML() {2
var pdf = new jsPDF('p', 'pt', 'A3');3
// source can be HTML-formatted string, or a reference4
// to an actual DOM element from which the text will be scraped.5
source = $('#customers')[0];6
7
pdf.addHTML(source,function() {8
pdf.save('PDF_'+ Math.random().toString(36).slice(2) +'.pdf');9
});10
}