wkhtmltopdf - same configuration different output

Question

I'm using wkhtmltopdf through snappy in my project. On my local machine the output is correct: https://www.dropbox.com/s/ml9cp2pa6d8wja5/Zaznaczenie_100.png?dl=0

but when I deploy the project to the server the pdf is looking very different, probably the width of viewport is different: https://www.dropbox.com/s/8g0c29bzaxltyb9/170311_123139_4775.jpg?dl=0

Both systems use exactly the same configuration for generating the pdf.

My questions are:

• how can I check what is the default configuration of wkhtmltopdf on specific machine?
• how can I change the viewport size so my output would be exactly the same on different machines?

I set the width and height of output page manually (21 cm and 50 cm respectively). I tried different combinations with DPI parameter, but it seems to have no effect.

I'm using the wkhtmltpdf PHP wrapper - snappy - but I checked and I get the same output in the console, so the problem is wkhtmltopdf-related, not snappy.

Bechler

Your DropBox links don't seem to work. Perhaps you should reupload your images through the edit box which would host your image on Stack Overflow's imgur hosting. – Springs

Thanks, fixed it! – Bechler

Can you confirm that the two versions on wkhtmltopdf's are the same? – Berlin

Did you find any solution for this ? @Bechler – Sylviasylviculture

No, we ended up dumping the wkhtmltopdf completely – Bechler

Answer 1

One of the main things that appears to be different in your PDF outputs is the font face. wkhtmltopdf requires fonts to be installed on your operating system in the same way a browser would require this. It is possible that differences in the spacing and sizing of fonts are affecting the layout of your page. You should first have a look at what fonts you are trying to use in your source file and install those on your server. A good start is to install Microsoft's core fonts from here, or from your server's distribution's repositories.

An alternative way around this is to use @font-face directives in your source file stylesheets to link to fonts from a URL, without installing them on your server:

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

In the case of Google's web fonts, you can instead import their stylesheets:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />

Another thing to check is the versions of wkhtmltopdf on your workstation and your server. Running wkhtmltopdf --version will tell you your currently installed version. It might be the case that your server is running an outdated version of wkhtmltopdf. The easiest way to install an up to date version of wkhtmltopdf with the features you need is from here, where you can download statically-linked Linux binaries for any distro.

One last thing to try is using different --margin-top, --margin-right, --margin-bottom and --margin-left arguments. There is also a flag called --viewport-size which may help to give better results.

wkhtmltopdf --viewport-size 1024x768 page.html output.pdf

If you are using the same version of wkhtmltopdf on both your workstation and server, however, these configuration options should not make a difference, as you stated you are using the same configuration on both already.

Springs

Fonts are not the problem. I tried --viewport-size flag, but it seems to be dead - no effect. Margins are set the same on both machines – Bechler

@Bechler What versions of wkhtmltopdf are on your server and workstation? And where did you install them from? – Springs

Answer 2

To back up Candy Gumdrop, we tried the margins, but our answer turned out to be the admin reused a 32-bit copy of wkhtmltopdf on the production server, not the 64-bit version I used. The entire results of "wkhtmltopdf --version" need to match, not just the version number.

Perfectly