Generate Multipage PDF using Single Canvas of HTML Document using jsPDF

jsPDF is a nice library to convert HTML content into PDF. We can put the different type of elements in PDF from HTML like an icon, images, text, CSS styles.
Here we will discuss an example of jsPDF to convert long HTML page into PDF document which will be generated client-side and download.

Let’s start…

Step 1) Include jsPDF and html2canvas liberary URl in head section of your HTML.

 

Step 2) We will add JS code for HTML to PDF conversion

In this code block we have used html2canvas function which will give canvas of HTML section we specified, then after getting canvas object we will add PDF page using a jsPDF method and add break-up of canvas s image(JPG) in PDF page.

There are some variables defined to automate Canvas width and HTML width height blunders during conversion. Names of variables are self-explanatory. In “totalPDFPages” we are getting total PDF pages we need to display whole data in HTML.

 

Step 3) Following is HTML part having container selector(canvas_div_pdf) which we used in JS code in step 2.

Other Method: We can have multiple sections on the page and we can convert each section to a canvas to add to separate PDF page.

See working demo here.

Let me know if you have more suggestions.

Happy Coding 🙂

3 thoughts on “Generate Multipage PDF using Single Canvas of HTML Document using jsPDF”

  1. Very nice tutorial! Thank you very much for this. Is it possible to implement some kind of padding so that a long html page isn’t simply cut into multiple PDF’s, but leaves some gap at the end of one page and some at the begining of the next one?

  2. Hello brother! Please tell me how can i add a bottom margin to the Pdf where i can add page number. Your help will be remembered. Thank you.

Leave a Reply

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