How to use multiple PDF pages using jsPDF with HTML2Canvas

Question

I have a script that uses HTML2Canvas to take a screenshot of a div on a page, and then convert it to pdf using jsPDF.

The problem is that the pdf file that is created is only one page, and in the screenshot in some cases more than one page is required. For example, a screenshot is larger than 8.5x11. The width is fine, but I need to create more than one page to fit all screenshots.

Here is my script:

 var pdf = new jsPDF('portrait', 'pt', 'letter'); $('.export').click(function() { pdf.addHTML($('.profile-expand')[0], function () { pdf.save('bfc-schedule.pdf'); }); }); 

Any ideas how I can change this to allow multiple pages?

Answer 1

pdf.addHtml does not work if there are svg images on the web page. I am copying the solution here based on a picture already on the canvas.

Here are the numbers (paper width and height) 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 imgData = canvas.toDataURL('image/png'); 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 2

you can use the addhtml page splitting option as follows:

 var options = { background: '#fff', pagesplit: true }; var doc = new jsPDF(orientation, 'mm', pagelayout); doc.addHTML(source, 0, 0, options, function () { doc.save(filename + ".pdf"); HideLoader();`enter code here` }); 

Note. This will break the html on several pages, but these pages will be stretched. Stretching is a problem in addhtml so far, and I still cannot find on the Internet how to solve this problem.

Answer 3

You can try:

 $('#cmd2').click(function () { var len = 4; //$x(".//body/div/div").length var pdf = new jsPDF('p', 'mm','a4'); var position = 0; Hide for (let i = 1;i <= len; i++){ html2canvas(document.querySelector('#pg'+i), {dpi: 300, // Set to 300 DPI scale: 1 // Adjusts your resolution }).then(canvas => { pdf.addImage(canvas.toDataURL("images/png", 1), 'PNG', 0,position, 210, 295); if (i == len){ pdf.save('sample-file.pdf'); }else{ pdf.addPage(); } }); } }); 

Answer 4

I was able to do this using async functions.

 (async function loop() { var pages = [...] for (var i = 0; i < pages.length; i++) { await new Promise(function(resolve) { html2canvas(pages[i], {scale: 1}).then(function(canvas) { var img=canvas.toDataURL("image/png"); doc.addImage(img,'JPEG', 10, 10); if ((i+1) == pages.length) { doc.save('menu.pdf'); } else { doc.addPage(); } resolve(); }); }); } })();