How to Create Multipage PDF from HTML Using jsPDF and html2Canvas

UPDATE: Some code is modified due to the initialisation of jsPDF code it was creating blank PDF, now I have added setTimeout of 2 seconds, this will initialize code after the page is loaded. I have also added a Demo Link below


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 whole HTML page into multi-page PDF document, which you can show in iFrame or user can even download it.


Let’s get started!


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


Step 2 – As we have a long HTML page to get converted into multiple PDF pages, so will break 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 canvas using Html2Canvas plugin and get pasted into PDF new page using jsPDF plugin.

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

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

In 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 next step.


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


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


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


Keep smiling 🙂

9 thoughts on “How to Create Multipage PDF from HTML Using jsPDF and html2Canvas”

    1. Thanks, Sarita! for sharing your experience… I have updated and modified code… please also visit new Demo link 🙂

  1. Hi,

    I did try out the above mentioned code, but it seem some error on getting the content for page1, page2 and page3 on both iframe and generated PDF. The generated PDF only one blank page. is there anything went wrong with the code?

    1. Hey! HK please use updated code, there issue with page render… now I have added a timeout of 2 seconds for relaxing initialisation also visit Demo page 🙂

  2. Hi, i have other question, but it still jsPDF problem, i use tab in my html code, and i need to render all, my question is : how to render all tab and merge them into one pdf file ?

    1. Hey, Yusuf! … What I understand is you have only one tab visible at a time right? But here html2canvas is converting only visible part to canvas… for the same reason I added scroll to top event…. so what you can do is just make tabs visible then run above function to capture then hide other tabs. Hope this helps 🙂

  3. Does this work correctly in firefox ? I have the impression that the order of the divs is printend randomly in the pdf.

Leave a Reply

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