,

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……

By.

min read

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.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

 

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.

	function getPDF(){

		var HTML_Width = $(".canvas_div_pdf").width();
		var HTML_Height = $(".canvas_div_pdf").height();
		var top_left_margin = 15;
		var PDF_Width = HTML_Width+(top_left_margin*2);
		var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);
		var canvas_image_width = HTML_Width;
		var canvas_image_height = HTML_Height;
		
		var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
		

		html2canvas($(".canvas_div_pdf")[0],{allowTaint:true}).then(function(canvas) {
			canvas.getContext('2d');
			
			console.log(canvas.height+"  "+canvas.width);
			
			
			var imgData = canvas.toDataURL("image/jpeg", 1.0);
			var pdf = new jsPDF('p', 'pt',  [PDF_Width, PDF_Height]);
		    pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
			
			
			for (var i = 1; i <= totalPDFPages; i++) { 
				pdf.addPage(PDF_Width, PDF_Height);
				pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
			}
			
		    pdf.save("HTML-Document.pdf");
        });
	};

 

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

<div class="canvas_div_pdf">

<!--Add HTML content you want to convert to PDF-->

</div>

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 🙂

32 responses to “Generate Multipage PDF using Single Canvas of HTML Document using jsPDF”

  1. Prema Avatar
    Prema

    thank you. This saved my day.

  2. mohamed Avatar
    mohamed

    thank you so much is this any way to save the pdf on server directory

    Regards

  3. sharpointjunkie Avatar
    sharpointjunkie

    First of all thank you so much for this solution. I just wanted to mention that: box-shadow is not rendering properly on exporting PDF. Is there a way to fix the box-shadow rendering issue.

    1. Naveen Kumar Avatar
      Naveen Kumar

      Hi Sharpointjunkie,
      Can you please share your code snippet for my reference that would be very helpful for me

  4. Luis Miguel Alvarado Román Avatar
    Luis Miguel Alvarado Román

    Gracias!!! Me ayudó muchísimo.

  5. JAVIER Avatar
    JAVIER

    THIS IS AMAZINGGG. GRACIASSSS

Leave a Reply

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