สวัสดีครับ ในวันนี้จะขอแนะนำ Plugin Javascript เกี่ยวกับการ Export PDF ที่ดีมาก ๆ อีก 1 ตัวครับ
โดยการทำงาน คือ สามารถ Export ข้อมูล ตาราง Html Table เป็น PDF ได้ทันทีสะดวกมาก ๆ เลยครับ
รายละเอียดเพิ่มเติม https://github.com/simonbengtsson/jsPDF-AutoTable
ต่อไปนี้จะเป็นตัวอย่างการนำไปใช้งานครับ
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Simple example</title> </head> <style> .tb{ border: solid 1px #565656; border-collapse: collapse; font-family: helvetica,serif; font-size: 10pt; width: 180mm; } .tb tr th , tr td { border:1px solid #000; padding:5px; } </style> <body> <script src="libs/jspdf.umd.js"></script> <script src="../dist/jspdf.plugin.autotable.js"></script> <p> <button onclick="generate()">Generate pdf</button> </p> <table id="table" class="tb"> <thead> <tr> <th>ID</th> <th>First name</th> <th>Last name</th> <th>Email</th> <th>Country</th> <th>IP-address</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Donna</td> <td>Moore</td> <td>dmoore0@furl.net</td> <td>China</td> <td>211.56.242.221</td> </tr> <tr> <td>2</td> <td>Janice</td> <td>Henry</td> <td>jhenry1@theatlantic.com</td> <td>Ukraine</td> <td>38.36.7.199</td> </tr> </tbody> </table> <script> function generate() { var doc = new jspdf.jsPDF() // Simple html example doc.autoTable({ html: '#table', }) doc.save('table.pdf') } </script> </body> </html> |
ตัวอย่าง Code แบบเต็ม ๆ ที่ https://github.com/simonbengtsson/jsPDF-AutoTable/tree/master/examples
ขอขอบคุณข้อมูลจาก https://github.com/simonbengtsson/jsPDF-AutoTable
