javascript - How to add top margin when using html2canvas and jspdf, when the canvas is split on multiple pages? -


i'm using html2canvas , jspdf create pdf of dynamic webpage, when size of canvas great 1 page add page , re-add image shifting next page. working can not figure out how set top margin , result 2nd page onward content on top of page. there way set top margin 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 96dpi, additional pages added if output greater 816 pixels (816p/96dpi = 8.5 inches)                 if(canvas.height > 816){                      for(i=1; i*816<canvas.height; i++){                         doc.addpage();                         //-215.89mm -8.5inches                         doc.addimage(imgdata, 'png',5,-215.89*i);                     }                 }                 doc.save('formoutput.pdf');             }         }); 

i resolved adjusting mediabox properties.

the method putpages in jspdf writes out page, , can manipulate media box , page width/height adjust page margins. hardcoded additional 52 (0.75in) height , -36 (0.5in) mediabox give every page margin.

this 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 have change page size footer looks right also.

i used:

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

this can turned in proper feature instead of hardcoding it, works now.


Comments

Popular posts from this blog

Android : Making Listview full screen -

javascript - Parse JSON from the body of the POST -

javascript - Chrome Extension: Interacting with iframe embedded within popup -