How to Create Multipage PDF from HTML Using jsPDF and html2Canvas

Hello everyone.

There are a number of tools which can easily create PDF files from JSON or raw data provided. But in some situations, we have rich UI elements like images and data representation in graphs, so in that case, we may require PDF as it is.

jsPDF and html2canvas are really powerful tools which can help you to convert the whole HTML page into a multi-page PDF document, which you can show in iFrame or user can even download it.

Step 1 – First we need to add the jQuery library into our project which is a basic dependency to get this work. Then we need to include the latest jsPDF and Html2Canvas plugins.

 

Step 2 – As we have a long HTML page to get converted into multiple PDF pages, so will break the whole HTML page into multiple chunks of pages with the help of selectors like we are using page1, page2 and page3 classes. Each selector or ID will be converted into

Each selector or ID will be converted into the canvas using Html2Canvas plugin and get pasted into PDF new page using the jsPDF plugin.

Here we have used a single generatePDF() method having html2canvas called three times to convert three sections of a single HTML page into three pages of PDF file.

html2canvas function will create a canvas and add it as Image in PDF page. Using the addPage() function we are setting the height and width of the new PDF page. We can adjust it dynamically or as per application requirements.

In the setTimeout() we have added code to create download link and iFrame if we want to show PDF created in and in page iFrame. Which we will add in the next step.

We will add a separate function to calculate Heights and Widths of HTML, Canvas and PDF page.

 

Step 3 РHere we will add HTML content which will be converted into a multipage PDF file.

 

After combining all sections above our final page will look like below:

 

That’s all folks!!! Let me know in the comments section if you face any issue in plugin this code sample into your app or if you have any suggestion always welcome.

 

Leave a comment

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