Welcome folks today in this blog post we will be adding dynamic nested html5 tables inside pdf document in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to copy paste the jspdf and jspdf-autotable library cdn as shown below
|
1 2 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.2.3/jspdf.plugin.autotable.js"></script> |
Now we need to add the htmltable in which we will be having the rows and columns. And we will attaching the id to the table. And also we have the button to generate the pdf document.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<button id="generate">Generate PDF</button> <table id="table"> <thead> <tr> <th>ID</th> <th>First name</th> <th>Last name</th> <th>Email</th> <th>Country</th> <th>Table</th> </tr> </thead> <tbody> <tr> <td align="right">1</td> <td>Donna</td> <td>Moore</td> <td>dmoore0@furl.net</td> <td>China</td> <td></td> </tr> <tr> <td align="right">2</td> <td>Janice</td> <td>Henry</td> <td>jhenry1@theatlantic.com</td> <td>Ukraine</td> <td></td> </tr> <tr> <td align="right">3</td> <td>Ruth</td> <td>Wells</td> <td>rwells2@constantcontact.com</td> <td>Trinidad and Tobago</td> <td></td> </tr> <tr> <td align="right">4</td> <td>Jason</td> <td>Ray</td> <td>jray3@psu.edu</td> <td>Brazil</td> <td></td> </tr> <tr> <td align="right">5</td> <td>Jane</td> <td>Stephens</td> <td>jstephens4@go.com</td> <td>United States</td> <td></td> </tr> <tr> <td align="right">6</td> <td>Adam</td> <td>Nichols</td> <td>anichols5@com.com</td> <td>Canada</td> <td></td> </tr> </tbody> </table> |
As you can see we have the five rows there in the table. And we have 6 columns in the table. If you open the app in the browser you will see the below screenshot
And now we will define the custom javascript function to generate the pdf document from the html5 table in the browser. Just add the below javascript code as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
var elem = document.getElementById("generate"); elem.onclick = function () { var doc = new jsPDF(); doc.autoTable({ html: '#table', didDrawCell: function (data) { if (data.column.dataKey === 5 && data.cell.section === 'body') { doc.autoTable({ head: [["One", "Two", "Three", "Four"]], body: [ ["1", "2", "3", "4"], ["1", "2", "3", "4"], ["1", "2", "3", "4"], ["1", "2", "3", "4"] ], startY: data.cell.y + 2, margin: {left: data.cell.x + data.cell.padding('left')}, tableWidth: 'wrap', theme: 'grid', styles: { fontSize: 7, cellPadding: 1, } }); } }, columnStyles: { 5: {cellWidth: 40} }, bodyStyles: { minCellHeight: 30 } }); doc.save('table.pdf'); }; |
As you can see we have getting the reference of the button using it’s id and we are attaching the onclick event listener to the button and then inside that function we are calling the jsPDF Autotable didDrawCell hook to convert the html table to pdf document alongside with the nested table that you see in the sixth column. First of all we are targeting the sixth column and inside that we are attaching the nested table inside that we are adding the columns of the nested table. And also we are attaching the theme of the table. And then we are attaching the columnstyles to the table. And also we are saving the pdf document using custom filename.
