I'm using HTML2Canvas and jsPDF to create a pdf of a dynamic webpage, when the size of the canvas is great than one page I add another page and re-add the image shifting it up to the next page. Everything is working well however I can not figure out how to set the top margin and as a result the 2nd page onward 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');
}
});
I resolved this by adjusting the mediaBox properties.
The method putPages in jspdf writes out a page, and you can manipulate the media box and page width/height to adjust the page margins. I hardcoded additional 52 (0.75in) to height and -36 (0.5in) to mediabox to give every page a margin.
This is the 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 would also have to change the page size so that the footer looks right also.
I used:
canvas.height = 72 * 10.25; // instead of 11
canvas.width = 72 * 8.5;
This can be turned in to a proper feature instead of hardcoding it, but works for now.