Welcome folks today in this blog post we will be compressing multiple files which are selected using html5 form by the user and then downloaded it as a zip file….
Category: javascript
jsPDF-Autotable Tutorial to Add Dynamic Nested HTML5 Tables inside PDF Document Using Javascript
SOURCE CODE index.html
|
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.2.3/jspdf.plugin.autotable.min.js"></script> <button id="generate">Generate PDF</button> <table id="table" style="display: none;"> <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> <script> 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'); }; </script> |
