JSPDF - addHTML () Multiple Canvases

Question

I already noticed that the release of “addHTML () can now split the canvas into multiple pages”, which can be found at this link: https://github.com/MrRio/jsPDF/releases/tag/v1.0.138 .

May I know how this works? In my case, I just tried this by clicking the "save as PDF" button, it just displays one page instead of several pages (sometimes it didn’t work, I guess because the content is too long to be generated as pdf).

Understand if there are examples for this case. Thanks!

Joined the codes below:

var pdf = new jsPDF('p', 'pt', 'a4'); pdf.addHTML($(".pdf-wrapper"), function () { var string = pdf.output('datauristring'); pdf.save("test.pdf"); }); 

Answer 1

Dividing the canvas into several pages is performed using the "pageplit" option:

 var pdf = new jsPDF('p', 'pt', 'a4'); var options = { pagesplit: true }; pdf.addHTML($(".pdf-wrapper"), options, function() { pdf.save("test.pdf"); }); 

Answer 2

pdf.addHtml does not work if there are svg images on the web page. I copy the solution here: // suppose your picture is already on the canvas var imgData = canvas.toDataURL ('image / png'); / * Here are the numbers (width and height of paper) that I found to work. This still creates a small portion of the overlap between pages, but is good enough for me. if you can find the official number from jsPDF, use them. * /

 var imgWidth = 210; var pageHeight = 295; var imgHeight = canvas.height * imgWidth / canvas.width; var heightLeft = imgHeight; var doc = new jsPDF('p', 'mm'); var position = 0; doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; while (heightLeft >= 0) { position = heightLeft - imgHeight; doc.addPage(); doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; } doc.save( 'file.pdf'); 

Answer 3

None of the above helped me, so I will put it here for everyone who comes to this page to use addHTML () to create a single PDF split into several pages with a different html element on each page. I used recursion, so I'm not sure about the implications of this approach. This helped me create a 4-page PDF file with 4 div elements.

 var pdf = new jsPDF('landscape'); var pdfName = 'test.pdf'; var options = {}; var $divs = $('.myDivClass') //jQuery object of all the myDivClass divs var numRecursionsNeeded = $divs.length -1; //the number of times we need to call addHtml (once per div) var currentRecursion=0; //Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively. function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){ //Once we have done all the divs save the pdf if(currentRecursion==totalRecursions){ pdf.save(pdfName); }else{ currentRecursion++; pdf.addPage(); //$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element //addHtml requires an html element. Not a string like fromHtml. pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){ console.log(currentRecursion); recursiveAddHtmlAndSave(currentRecursion, totalRecursions) }); } } pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){ recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded); }); } 

Answer 4

When using pagesplit: true it always stretches the output in pdf format. Try using the old version of jsPDF with html2canvas of course.

Sharing the results of my 2-day trial to create multi-page PDF generation with addHTML not fromHTML , as it loses CSS rules.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> 

then the pdf file should be in order:

 <script> $(window).on('load', function(){ var pdf = new jsPDF('p', 'pt', 'a4'); var pdfName = 'sample.pdf'; var options = { format: 'JPEG', // pagesplit: true, "background": '#000', }; var fullPage = $('#Printout_21571')[0], firstPartPage = $('#part-1')[0], secondPartPage = $('#part-2')[0]; pdf.addHTML(firstPartPage, 15, 20, options, function(){ pdf.addPage() }); pdf.addHTML(secondPartPage, 15, 20, options, function(){}); setTimeout(function() { // pdf.save(pdfName); var blob = pdf.output("blob"); window.open(URL.createObjectURL(blob)); }, 600); }) </script> 

Hope this helps. Thanks!