Welcome folks today in this blog post we will be talking about how to convert html with custom css to pdf document in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to include the jspdf library cdn inside your browser as shown below
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> </head> <body> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> </html> |
As you can see we are including the cdn of jspdf library in the script tag. After this we will be adding some DOM Elements to export to pdf document
Adding DOM Elements With Custom CSS
|
1 2 3 4 5 6 7 8 |
<div id="htmlwithcss"> <h1>This is a simple heading with no CSS</h1> <h1 style="background-color:black;color:yellow;">This is heading with Custom CSS</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae fugit, similique tenetur culpa perferendis illo laboriosam qui cupiditate, magnam provident id aliquid nemo, recusandae libero consequatur rerum quidem exercitationem corrupti.</p> <button>Simple Button</button> <button style="background-color:black;color:white">CSS Button</button> </div> <button onclick="generatePDF()">Generate PDF</button> |
As you can see we have the div element where we have assigned the id parameter to it so that we can target later on in javascript to export it’s html content to pdf document with custom css. And then inside it we have the two h1 headings one simple and second with custom css. And then we have two buttons out there one simple and second with custom css. And then we have the button where we attached the onclick event handler. Now we need to write the method generatePDF() to export the html with css to pdf document.
Writing the Javascript Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function generatePDF(){ let specialElementHandlers = { "#htmlwithcss":function(element,renderer){ return true } } var doc = new jsPDF() doc.fromHTML(document.getElementById('htmlwithcss').innerHTML,15,15,{ "width":170, "elementHandlers":specialElementHandlers }) doc.save("output.pdf") } |
As you can see inside this method we are first of all making the object where we are providing the first property as the id of the html element that we need to export to pdf document. This returns a callback function holding the element and renderer object as well. Through that we are returning true. And then we are initializing a new jsPDF Document and inside it we are using the fromHTML() method to pass the content of the div element that we need to export to pdf document. Here we are using it’s id and it’s innerHTML property. And then we are providing x and y coordinates and then we have the width of the pdf document and also we are attaching the elementHandlers property attached to the specialElementHandlers object that we have declared earlier on.
And lastly we are saving the output pdf document with the custom file name
As you can see we are preserving the custom css that we defined in html inside the pdf document also using the jspdf library.
