PhantomJS PDF DPI scaling issues

3
votes

I'm trying to convert an html file to PDF via PhantomJS and can't figure out how to avoid the dpi scaling problems. Just having an element as simple as <div style=" display:block; background-color:red; width:96px; "> text </div> Has it's width decreased to 77px. The values of my viewPort or paperSize don't seem to change this. I can adjust the zoomFactor to 1.25 which has been suggested elsewhere, this scales to roughly the intended width, but messes up certain elements in the page.

I have an svg chart generated by HighCharts which is set up to fill 100% width, I've also tried width: 210mm but this will be scaled down instead of matching a paperSize width of 210mm. I know that A4 at 96dpi is meant to be 794px x 1120px, and via the PDF viewer at 100% zoom this is the px measurements(from my understanding PDFs on windows are displayed at 96dpi). I was able to get my HighCharts div with width:100% to render as intended matching the PDFs width by taking those px dimensions and multiplying by 1.25, 992 x 1400 values for the viewPort with the paperSize set to A4 portrait and no margin. Unfortunately that doesn't adjust the rest of the content that is getting downscaled.

One other option was to avoid A4 papersize and provide the same px values as the viewPort, these are also downsized for a matching document, though this was intended for a reporting service where A4 PDF was expected... As none of the content is raster based is there a way I can upscale this to fill/fit A4 PDF dimensions? Ideally the browser and pdf versions would look similar in size visually on the same machine(PhantomJS is being used via Atom-Shell app), perhaps that isn't a consistent experience that can be provided to users?

2
pdfhighchartspdf-generationphantomjsdpi

2 Answers

1
votes

There is a Fork with a fix for that. You can set the dpi now with this fork: https://github.com/martonw/phantomjs/tree/issue-%2313553

You need to compile it for your OS and then you can set the dpi with page.dpi

console.log('Loading a web page');
var page = require('webpage').create();
var url = 'http://phantomjs.org/';
   page.open(url, function (status) {
   //Page is loaded!
   page.dpi=300; // this is where you actually set the DPI
   page.render("test.pdf");
   phantom.exit();
}

Be sure you use the same OS for phatomjs on where you compile it, because the compile process reads the dpi from the system and uses it for phantomjs. This means: If you compile it on windows with standard dpi 96 and use it on centos you will have a scale of 96/72 because centos uses 72 dpi

0
votes

Yes, >2.0 has a poorly defined A4. I scale my html by adjusting the css style from within rasterize.js just before the .render command.

page.evaluate(function () {
    var the_page = document.getElementsByTagName("page")[0];
    the_page.style.transformOrigin='0 0';
    the_page.style.WebkitTransformOrigin='0 0';
    the_page.style.transform='scale(1.28)';
    the_page.style.webkitTransform ='scale(1.28)';
);