Phantomjs generates multiple page PDF

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

At the beginning of

Recently used Phantomjs to generate PDF, which encountered some problems, causes PDF to generate failure, such as the emergence of a blank document or a page of data is too large, it is because there is no set format to. Especially the paging problem, feel very little information, in addition to see some information in StackOverflow, Chinese community largely invisible, attached is the revised rasterize.js to explain:

1 var page = require('webpage').create(), 2 system = require('system'), 3 address, output, size; 4 5 if (system.args.length <3 || system.args.length > 5) { 6 console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]'); 7 console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"'); 8 phantom.exit(1); 9 } else { 10 address = system.args[1]; 11 output = system.args[2]; 12 /*size of browser*/ 13 page.viewportSize = { width: 600, height: 600 }; 14 /* 15 if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") { 16 size = system.args[3].split('*'); 17 page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' } 18 : { format: 'A4', orientation: 'portrait', margin: '1cm' }; 19 } 20 */ 21 /* ie and chrome view diffrent format of pdf */ 22 page.settings.userAgent = 'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36'; 23 page.paperSize = { format: 'A4', orientation: 'portrait', margin: '0.8cm' }; 24 page.zoomFactor = 1; 25 page.settings.loadImages = true; 26 //some question about the page language 27 page.open(address, function (status) { 28 if (status !== 'success') { 29 console.log('Unable to load the address!'); 30 } else { 31 //page.render(output); 32 //phantom.exit(); 33 34 window.setTimeout(function () { 35 page.render(output); 36 phantom.exit(); 37 }, 200); //setting the time is enough to loading the page. document.ready 38 39 } 40 }); 41 }

PDF formatting

The property is set to page, here can understand more deeply, we can understand the WebPage Module.

We need to set up, basically is the page format, scaling, load the pictures, but there are some exceptions, the following one one explanation.

1 page.paperSize = { format: 'A4', orientation: 'portrait', margin: '0.8cm' };

Comment out the official example setup code, because the parameter passed only 3, until.Pdf, when written in general pattern, of course can be used as external parameter.

format : A4 paper, can be set to "5in*7.5in", "10cm*20cm", "Letter" etc.

orientation : The paper direction is vertical, or landscape

margin : And the paper quadrilateral space, can be customized, can also be set in detail margin : { left: '0.8cm', top : '0.8cm', right : '0.8cm', bottom : '0.8cm' }

1 page.zoomFactor = 1;
2 page.settings.loadImages = true;

zoomFactor : Page scaling

loadImages : Page loading.

1 page.settings.userAgent = 'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36';

This setting is not common, there is no mention of the general example, because using the chrome and IE open generated PDF format is not the same (in paging aspect), due to bias Chrome browsing format, so this value is set, to solve the inconsistent problem.

SetTimeout page.open inside: wait for the page to execute the JS, then generate the PDF. Of course for the JS to perform long (wait), this did not know how to budget. In fact, I have tried Ajax loading content, but this problem and give up.

For more information, the header and footer and pagination problem, can be found here.


PDF paging

Paging, better control, does not need the code (JS) settings, page style can be:

style = "page-break-after: always;"

Control page size, use <div style="page-break-after: always;">content</div> On the line.

More choice "page-break-before: always;" style=, style= "page-break-inside: avoid;" this can avoid the content to the two page


Summary

On this the phantomjs PDF render, if there are more good way and problem solving, welcome to share.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Lydia at June 16, 2014 - 8:21 AM