Welcome folks today in this blog post we will be converting html div & table to pdf
with custom css without using jspdf-autotable
library using fromHTML() method in browser using jspdf library in 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 include the cdn
libraries of the jspdf
library which will convert the html
to pdf with css
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>COVID-19 API in Javascript</title> </head> <style> </style> <body> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> </html> |
And now we need to declare the simple
div which will contain the h1
heading and a simple html5 table which we need to export to 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 |
<div id="content"> <h1>This is the heading</h1> <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>Kane</td> <td>25</td> <td>New Zealand</td> </tr> <tr> <td>Harry</td> <td>25</td> <td>England</td> </tr> <tr> <td>Jim</td> <td>25</td> <td>Canada</td> </tr> </tbody> </table> </div> |
And now we need to apply some custom css to this h1 element as shown below
1 2 3 |
h1{ color:green } |
And now if you see the heading it will have the background color of green and text color will be yellow. Now we need to preserve these css properties and export this to pdf document
And now we need to write the javascript
code to export this to pdf using the jspdf
library as shown below
1 2 3 4 |
let doc = new jsPDF() let h1 = document.querySelector('#content') doc.fromHTML(h1,15,15) doc.save("output.pdf") |
As you can see we are declaring the new document using the jspdf
constructor and then we are using the fromHTML()
method to convert the html
to pdf and in the argument we are passing the x and y coordinates and then we are saving the pdf with a custom name of output.pdf as shown above.
Now if you open the index.html
file inside the browser you will see the below pdf document created