How to add top edge when using html2canvas and jspdf when the canvas is divided into several pages?

Question

I use HTML2Canvas and jsPDF to create a pdf page for a dynamic web page, when the canvas size exceeds one page, I add another page and add the image again, moving it to the next page. Everything works well, but I can’t figure out how to set the top edge, and as a result, on the second page, all the content is on the very top of the page. Is there a way to set the top margin for all pages?

html2canvas($("#formpdfarea"), { onrendered: function(canvas) { var imgData = canvas.toDataURL( 'image/png'); var doc = new jsPDF('l', 'mm', 'letter'); doc.addImage(imgData, 'PNG', 5, 0); //output is 96dpi, additional pages added if output is greater than 816 pixels (816p/96dpi = 8.5 inches) if(canvas.height > 816){ for(i=1; i*816<canvas.height; i++){ doc.addPage(); //-215.89mm which is -8.5inches doc.addImage(imgData, 'PNG',5,-215.89*i); } } doc.save('formoutput.pdf'); } }); 

Answer 1

I solved this by setting the mediaBox properties.

The putPages method in jspdf writes out the page, and you can manipulate the media margins and page width / height to adjust the margins of the page. I hard-coded an extra 52 (0.75 inches) to the height and -36 (0.5 inches) to the media box to give each page a margin.

This is a code change:

 wPt = (pageWidth = pagedim[n].width) * k; hPt = (pageHeight = pagedim[n].height + 52) * k; out('<</Type /Page'); out('/Parent 1 0 R'); out('/Resources 2 0 R'); out('/MediaBox [-36 0 ' + f2(wPt) + ' ' + f2(hPt) + ']'); 

You will also need to resize the page so that the footer also looks right.

I used:

 canvas.height = 72 * 10.25; // instead of 11 canvas.width = 72 * 8.5; 

This may be included in the correct function instead of hard coding, but it works for now.

Answer 2

I spent several hours searching for a solution located in the jsPDF library, but it does not seem to be available at the moment. Once you specify pageplit, it seems to ignore other jsPDF options such as margin.

SO, I did it myself, breaking the pages manually. It is actually relatively simple. :)

I created this for a large table. If you are trying to split something other than a table, you can still use this concept. All you really need to do is change the CSS classes to make the different parts visible.

 function add_page() { // Youre header & footer stuff goes here pdf.addHTML($('#pdfPage'), 20, 26, options, function() { check_page(); }); } function check_page() { tr_rows = tr_rows - 28; if( tr_rows > 0 ) { $('#pdfPage').removeClass('pdf_page_' + current_pdf_page).addClass('pdf_page_' + ++current_pdf_page); pdf.addPage(); add_page(); } else { pdf.save( filename + '.pdf' ); } } $('#pdfPage').addClass('pdf_page_1'); tr_rows = $('#pdfPage tbody tr').length; current_pdf_page = 1; add_page(); 

And here are my CSS classes:

 .pdf_page_1 tr:nth-child(n+28) { display: none; } .pdf_page_2 tr:nth-child(-n+28) { display: none; } .pdf_page_2 tr:nth-child(n+56) { display: none; } .pdf_page_3 tr:nth-child(-n+56) { display: none; } .pdf_page_3 tr:nth-child(n+84) { display: none; } .pdf_page_4 tr:nth-child(-n+84) { display: none; } .pdf_page_4 tr:nth-child(n+112) { display: none; } #pdfPage tr:first-child { display: table-row !important; }