Geek Answers Handbook

Phantomjs page-break-after: always creates spaces

I ran into a problem with phantomjs (html to pdf), I have 1 html page that has 16 divs, and I was ready to add a page break for each, but when I add a break-after page: always on every div, in pdf, creating a lot of spaces, suppose when I add space to 2 divs and relax with a page violation, then the spaces are not many, but when the spaces are added 3,4,5, etc., then the spaces add more funds, each page has much how can i solve this, thanks in advance.

here is my code

fs.readFile(__dirname + '/../pdf' + pdfpath, 'utf8', function (err, data) { // Render the page to variable. var html = ejs.render(data, pdfJSON); // Set this html as the content for the pdf file. page.set('content', html); var fileName = __dirname + '/pdfdata/' + f.formType + f.formId + '.pdf'; // Generate the pdf. page.render(fileName); });

and here is my html page code

 <html> <head> <title>PreQual PDF Export</title> <style type="text/css"> <!-- body { font-family: Arial; font-size: 33.0px } .pos { position: absolute; z-index: 0; left: 0px; top: 0px } .set-top{ top: 20px;} --> </style> </head> <body > <nobr> <nowrap> <div class="set-top" style="page-break-after: always;position:relative;left:50%;margin-left:-398px;width:928px;height:1170px;overflow:hidden"> <div style="position:absolute;left:0px;top:0px"> <img name="_1170:828" src="<%= baseUrl %>/pdf/prequal/page_001.jpg" height="1170" width="828" border="0" usemap="#Map"> </div> <div class="pos" id="_126:284" style="top:284;left:126"> <span id="_30.8" style=" font-family:Arial; font-size:30.8px; color:#fdfffd"> Prequal Documents for the</span> </div> <div class="pos" id="_126:323" style="top:323;left:126"> <span id="_30.8" style=" font-family:Arial; font-size:30.8px; color:#fdfffd"> procurement of Goods</span> </div> <div class="pos" id="_138:975" style="top:975;left:138"> <span id="_15.4" style="font-weight:bold; font-family:Arial; font-size: 14px; color:#fdfffd"> SAQ Return Date:<span><%= saqDate %></span></span> </div> <div class="pos" id="_492:975" style="top:975;left:492"> <span id="_15.4" style="font-weight:bold; font-family:Arial; font-size: 14px; color:#fdfffd"> Project Reference No. TCD<%= refNo %></span> </div> <div class="pos" id="_136:1092" style="top:1092;left:136"> <span id="_13.6" style="font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000;"> <img name="_1170:829" src="<%= baseUrl %>/providers/public/files/<%= file1 %>" height="50" width="50" border="0" style="left:10px;" alt="No Image"/></span> </div> <div class="pos" id="_267:1095" style="top:1095;left:267"> <span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000;"> <img name="_1170:829" src="<%= baseUrl %>/providers/public/files/<%= file2 %>" height="50" width="50" border="0" style="left:10px;" alt="No Image"/></span> </div> <div class="pos" id="_369:1095" style="top:1095;left:369"> <span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000;"> <img name="_1170:829" src="<%= baseUrl %>/providers/public/files/<%= file3 %>" height="50" width="50" border="0" style="left:10px;" alt="No Image"/></span> </div> <div class="pos" id="_480:1093" style="top:1093;left:480"> <span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000;"> <img name="_1170:829" src="<%= baseUrl %>/providers/public/files/<%= file4 %>" height="50" width="50" border="0" style="left:10px;" alt="No Image"/></span> </div> <div class="pos" id="_609:1094" style="top:1094;left:609"> <span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000;"> </span> </div> </div> <!-- Page No 2 --> <div class="set-top" style="page-break-after: always;position:relative;left:50%;margin-left:-398px;width:928px;height:1170px;overflow:hidden"> <div class="pos" id="_0:0" style="top:0"> <img name="_1170:827" src="<%= baseUrl %>/pdf/prequal/page_002.jpg" height="1170" width="827" border="0" usemap="#Map"></div> <div class="pos" id="_157:1357" style="top:200;left:157"> <span id="_24.5" style=" font-family:Arial; font-size:24.5px; color:#61c5c5"> Contents</span> </div> <div class="pos" id="_414:1348" style="top:200;left:414"> <span id="_24.5" style=" font-family:Arial; font-size:24.5px; color:#fcfcfc"> Part 01</span> </div> <div class="pos" id="_414:1392" style="top:240;left:414"> <span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000;"> INTRODUCTION</span> </div> <div class="pos" id="_154:1560" style="top:400;left:154"> <span id="_24.5" style=" font-family:Arial; font-size:24.5px; color:#fcfcfc"> Part 02</span> </div> <div class="pos" id="_414:1569" style="top:400;left:414"> <span id="_24.5" style=" font-family:Arial; font-size:24.5px; color:#fcfcfc"> Part 03</span> </div> <div class="pos" id="_154:1597" style="top:440;left:154"> <span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000;"> PASS / FAIL</span> </div> <div class="pos" id="_154:1615" style="top:460;left:154"> <span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000;"> REQUIREMENTS</span> </div> <div class="pos" id="_414:1607" style="top:440;left:414"> <span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000;"> SELECTION CRITERIA</span> </div> </div></nowrap></nobr> </body> </html>
+8
jquery pdf-generation phantomjs express
source share
1 answer

try it

 page.set( 'paperSize', { width: 1200, height: 1500} );
+6
source share

More articles:


All Articles