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.

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. — Candy Gumdrop
Can you confirm that the two versions on wkhtmltopdf's are the same? — Ruslan

Candy Gumdrop Candy Gumdrop · Accepted Answer · 2017-03-17T16:11:07

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.

wkhtmltopdf - same configuration different output

2 Answers