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
