Skip to content

Coding Shiksha

Menu
  • Home
  • Youtube Channel
  • Online Store
  • Online Tools
  • Donate Us
  • Sitemap
  • Privacy Policy
Menu

jsPDF Tutorial to Convert HTML with Custom CSS to PDF Document in Javascript

Posted on October 28, 2022

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.

 

 

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

©2023 Coding Shiksha | Design: Newspaperly WordPress Theme