Welcome folks today in this blog post we will be adding dynamic text
and tables
inside pdf document using jspdf & jspdf-autotable
library in browser 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 following code
index.html
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://parall.ax/parallax/js/jspdf.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script> |
As you can see you need to include the jspdf
and jspdf-autotable
library cdn.
Adding Dynamic Text in PDF Document
Now guys we will be having a simple input field where we will allow the user to input the dynamic text and then we will have the button to generate the pdf document as shown below
1 2 3 4 5 |
<h1>jsPDF Simple Example to Convert Text to PDF</h1> <form id="form"> <input type="text" name="" id="text" placeholder="Enter your text" required> <button>Generate PDF</button> </form> |
Now we need to write the javascript code for this purpose. We will be first of all attaching the form event listener using their id. And then we need to add the text inside the pdf document using the text()
method in jspdf.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let form = document.getElementById('form') form.addEventListener('submit',(e) => { e.preventDefault() let text = document.getElementById('text').value let doc = new jsPDF() doc.text(text,10,10) doc.save("output.pdf") }) |
Now if you open the index.html
file inside the browser you will see the below result
Adding the Table in PDF Document
Now we need to add the table
html code and we will be also have a 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 |
<table id="table"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>Gautam</td> <td>25</td> <td>India</td> </tr> <tr> <td>John</td> <td>28</td> <td>New Zealand</td> </tr> <tr> <td>Jim</td> <td>29</td> <td>USA</td> </tr> <tr> <td>David</td> <td>20</td> <td>England</td> </tr> <tr> <td>Lesnar</td> <td>45</td> <td>Iceland</td> </tr> <tr> <td>Latham</td> <td>35</td> <td>Russia</td> </tr> </tbody> </table> <button onclick="tableToPdf()">Convert Table to PDF</button> |
Now we need to write the method which we have binded on the button. Now we need to write the javascript code which basically uses the plugin of jspdf which is jspdf-autotable to convert the html5 table to pdf document
1 2 3 4 5 6 7 8 9 |
function tableToPdf(){ let doc = new jsPDF() doc.autoTable({ html:"#table" }) doc.save("table.pdf") } |
Basically in the above code you can see that we are using the autoTable()
method where we are providing the html
property to the html5 table