Create a one-page .pdf using PhantomJS

Question

I am exporting a variable height web page to pdf using PhantomJS. Since pdf files can have any page size (rather, a relation, though, since it is vectorial), I would like to export it in such a way as to create a single page in pdf format that matches the entire web page.

Fortunately, using the evaluate method of evaluate , I can easily determine the page height.

 page.includeJs('jquery.js', function() { var pageHeight = page.evaluate(function() { return $('#content').height(); }); }); 

However, I am not sure how I can use this to my advantage. viewportSize does not affect this in any way, since I am not showing viewport, but the entire document. I set it to a fixed {width: 800, height: 800}

Therefore, I cannot wrap my head around paperSize sizes. Setting the height of the returned page Height will display 1.5x pages, so I tried to change the width, but this actually does not match any formula I can understand.

Any ideas on how to achieve this, or you have more information about the correlation between the paperSize property and the pixel sizes displayed on the page

Answer 1

Cybermaxs answer extension, I added

• set a fixed width (36 cm fits my view port well) and
• unit of height
• set the field to 0px.

I cannot give a good explanation, but it works for me.

Full script:

 var page = require('webpage').create(), system = require('system'), address, output, size; if (system.args.length < 3 || system.args.length > 5) { console.log('Usage: screenshot.js <URL> <filename>'); phantom.exit(1); } else { address = system.args[1]; output = system.args[2]; page.viewportSize = { width: 1280, height: 900}; page.open(address, function (status) { if (status !== 'success') { console.log('Unable to load the address!'); phantom.exit(); } else { window.setTimeout(function () { page.includeJs("//code.jquery.com/jquery-1.10.1.min.js", function() { var size = page.evaluate(function () { return {width: width = "36cm", height : $(document).height()*2+400 + "px", margin: '0px' }; }); page.paperSize = size; page.render(output); phantom.exit(); }); }, 400); } }); } 

Answer 2

viewportSize simulates the size of the window, as in a traditional browser. This affects page rendering due to HTML layout, but not directly to PDF rendering.

Use page.papersize to determine the size of the web page when rendering in PDF format. With a bit of jquery, it’s easy to display a webpage in a single document, for example:

 var page = require('webpage').create(), system = require('system'), address, output; if (system.args.length != 3) { console.log('Usage: spdf.js URL filename'); phantom.exit(1); } else { address = system.args[1]; output = system.args[2]; page.viewportSize = { width: 600, height: 600 }; page.open(address, function (status) { if (status !== 'success') { console.log('Unable to load the address!'); phantom.exit(); } else { var size = page.evaluate(function () { return {width: width = $(document).width(), height : $(document).height() }; }); page.paperSize = size; page.render(output); phantom.exit(); } }); }