How to Create Multipage PDF from HTML Using jsPDF and html2Canvas

Last Updated on 25 July 2018

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.

See working demo here.

Let’s get started!

 

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 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 the canvas using Html2Canvas plugin and get pasted into PDF new page using the 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.

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.

Other Method: Create a Single canvas of the whole HTML section and break it up for different PDF pages.

Keep smiling 🙂

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

24
Leave a Reply

avatar
17 Comment threads
7 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
16 Comment authors
IfrazsurbhiOlivia ShettlesvijayHugo Villa Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Sarita
Guest
Sarita

My first page overlaps on last page

HK
Guest
HK

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?

Yusuf
Guest
Yusuf

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 ?

Raf Van den Bosch
Guest
Raf Van den Bosch

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

Hemant
Guest
Hemant

thanks for this tutorial

Hemant
Guest
Hemant

if i want to stick the header and footer on every page then what will be the codes?

Sandeep
Guest

I have much content in my page it picks only some content as pdf .
Any suggestions please let me know

jayesh sharma
Guest
jayesh sharma

I have followed the same procedure but my first page would be blank by this.

Raviraj
Guest
Raviraj

hi i am trying to use the same but with the charts
in my case charts is not getting displayed fully
can you pls say me how can i solved this issuse and where i am doing wrong

saroj
Guest
saroj

Hi, .print-wrap { width: 700px; margin: auto; background: #1a577b; color: #fff; padding: 15px; margin-bottom: 30px; } when ever i make width 700px or 100% pdf download is not working but when width 500px it workes fine as per demo.Thanks for your great work.Please give me some suggestion how i fix it.

D Hopp
Guest
D Hopp

Please disregard my previous comment! I figured out that I messed up adding a new PDF instance instead of a page for pages 2 and up!!

Dia
Guest
Dia

I am still having a problem. I have 5 calls to html2canvas for 5 different divs. Sometimes they fire in the correct order and sometimes they don’t. Sometimes the call to toDataURL finishes in order and sometimes it doesn’t. How do I remedy this? My code fails when it tries to any of the subsequent images before it adds the first one which has the initialization of the PDF or the images show in the incorrect order.

Hugo Villa
Guest
Hugo Villa

if you try with more than 15 pages, will generate the error: Uncaught (in promise) TypeError: pdf.addPage is not a function

vijay
Guest
vijay

Hi Jolly,

I have question when the div is having more content and it goes to next page, the content should start with top spacing. Can you help me this and also it should have header and footer in all pages

Olivia Shettles
Guest
Olivia Shettles

Do you have a solution for landscape PDF?

surbhi
Guest
surbhi

Does support svg?

Ifraz
Guest
Ifraz

Is there a way to set the location where the pdf has to be downloaded, coz i need it to be emailed. kindly help