Welcome folks today in this blog post we will be exporting html table to pdf document without using jspdf-autotable library using the fromhtml
method. 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 cdn library using the below code
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script> |
And now we need to copy paste the html5
table here we have three columns which is name,age and country. And now copy paste the below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<table id="table"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>New Zealand</td> </tr> <tr> <td>Smith</td> <td>29</td> <td>Australia</td> </tr> </tbody> </table> |
As you can see we have attached the id
parameter to the html5 table so that we can target in jspdf using javascript.
And now we will be having the button to generate the pdf document
1 |
<button onclick="generatePDF()">Generate PDF</button> |
Now we will be writing the generatePDF()
function so we need to copy paste the below code
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 |
function generatePDF(){ let specialElementHandlers = { 'no-export':function(element,renderer){ return true } } let doc = new jsPDF() let source = document.getElementById('table').innerHTML let margins = { top:10, bottom:10, left:10, width:595 } doc.fromHTML( source, margins.left, margins.top, { "width":margins.width, "elementHandlers":specialElementHandlers }, function(dispose){ doc.save("output.pdf") },margins ) } |
As you can see in the above code we are initializing the specialElementHandlers
object in which we have defined the margins and the positioning of the elements. And then we are using the fromHTML()
method to convert the input html5 table having the id called table
and then we are attaching the margin from the left and the top and then we are attaching the elementHandlers property. And then we have the callback function and inside that we will be downloading the pdf document with the custom filename. Now if you open the app inside the browser you will see the below screenshot