Welcome folks today in this blog post we will be adding colorful theme tables in pdf document using javascript. All the full source code of the application is shown below
Get Started
In order to get started you need to make an index.html file and copy paste the below code. First of all you need to include the jspdf & jspdf-autotable library cdn as shown below
|
1 2 |
<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.5.6/jspdf.plugin.autotable.min.js"></script> |
And now we need to create the html5 table inside the html file as shown below. This will contain the html table along side some css styles as well. And also we will have the simple button to export the pdf document 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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<style> th, td { text-align: center; border: 1 px solid black; border-collapse: collapse; } </style> <center> <h2>TOTAL MARKS OF STUDENTS</h2> <br /> <table id="simple_table"> <tr> <th>Roll No.</th> <th>Name</th> <th>Marks</th> </tr> <tr> <td>1</td> <td>Anna</td> <td>85</td> </tr> <tr> <td>2</td> <td>Bhavesh</td> <td>72</td> </tr> <tr> <td>3</td> <td>Sandhya</td> <td>63</td> </tr> <tr> <td>4</td> <td>Rohan</td> <td>90</td> </tr> <tr> <td>5</td> <td>Leena</td> <td>82</td> </tr> <tr> <td>6</td> <td>Nayan</td> <td>56</td> </tr> </table> <br /> <input type="button" onclick="generate()" value="Export To PDF" /> </center> |
As you can see we have the simple table in which we have three columns and also we are including the custom css styles for the table and then we have simple rows in the table. And also we have the simple button to export the table to pdf document. And also we have attached the onClick event listener to the button. When we click the button we will execute the custom function generatePDF() method. Now we need to define this method as shown below
And we will write the custom function to generate the pdf document 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 36 37 38 39 40 41 42 43 44 45 46 47 48 |
function generate() { var doc = new jsPDF('p', 'pt', 'letter'); var htmlstring = ''; var tempVarToCheckPageHeight = 0; var pageHeight = 0; pageHeight = doc.internal.pageSize.height; specialElementHandlers = { // element with id of "bypass" - jQuery style selector '#bypassme': function(element, renderer) { // true = "handled elsewhere, bypass text extraction" return true } }; margins = { top: 150, bottom: 60, left: 40, right: 40, width: 600 }; var y = 20; doc.setLineWidth(2); doc.text(200, y = y + 30, "TOTAL MARKS OF STUDENTS"); doc.autoTable({ html: '#simple_table', startY: 70, theme: 'grid', columnStyles: { 0: { cellWidth: 180, }, 1: { cellWidth: 180, }, 2: { cellWidth: 180, } }, styles: { minCellHeight: 40 } }) doc.save('Marks_Of_Students.pdf'); } |
As you can see in the above method we are initializing the new jsPDF Document in which we are passing some measurement options. And then we are declaring some variables for the html content and then we are calculating the page size and height of the pdf document. And then we are targeting the table element using it’s id. And then we are adding the margin to the table. And also we are setting the line width of the table. And also we are inserting text inside the pdf document at x and y coordinates. And then we are using the autoTable() method we are passing the html parameter where we will be passing the id of the table element. And then we are passing the custom styles property where we are setting the css properties of the table. And then we are setting the columnStyles of the table. And then we are saving the pdf document with the custom filename. And also we are setting the theme option as well for the table. There are three themes available for jspdf-autotable as shown below
- Plain
- Striped
- Grid
And now if you open the web app inside the browser you will see the below screenshot as shown below
Full Source Code
Wrapping this blog post this is the full source code of index.html file as shown below
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 |
<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.5.6/jspdf.plugin.autotable.min.js"></script> <style> th, td { text-align: center; border: 1 px solid black; border-collapse: collapse; } </style> <center> <h2>TOTAL MARKS OF STUDENTS</h2> <br /> <table id="simple_table"> <tr> <th>Roll No.</th> <th>Name</th> <th>Marks</th> </tr> <tr> <td>1</td> <td>Anna</td> <td>85</td> </tr> <tr> <td>2</td> <td>Bhavesh</td> <td>72</td> </tr> <tr> <td>3</td> <td>Sandhya</td> <td>63</td> </tr> <tr> <td>4</td> <td>Rohan</td> <td>90</td> </tr> <tr> <td>5</td> <td>Leena</td> <td>82</td> </tr> <tr> <td>6</td> <td>Nayan</td> <td>56</td> </tr> </table> <br /> <input type="button" onclick="generate()" value="Export To PDF" /> </center> <script type="text/javascript"> function generate() { var doc = new jsPDF('p', 'pt', 'letter'); var htmlstring = ''; var tempVarToCheckPageHeight = 0; var pageHeight = 0; pageHeight = doc.internal.pageSize.height; specialElementHandlers = { // element with id of "bypass" - jQuery style selector '#bypassme': function(element, renderer) { // true = "handled elsewhere, bypass text extraction" return true } }; margins = { top: 150, bottom: 60, left: 40, right: 40, width: 600 }; var y = 20; doc.setLineWidth(2); doc.text(200, y = y + 30, "TOTAL MARKS OF STUDENTS"); doc.autoTable({ html: '#simple_table', startY: 70, theme: 'grid', columnStyles: { 0: { cellWidth: 180, }, 1: { cellWidth: 180, }, 2: { cellWidth: 180, } }, styles: { minCellHeight: 40 } }) doc.save('Marks_Of_Students.pdf'); } </script> |
