41

I am using wkhtmltopdf to generate a PDF file that is going to a printer and have some troubles with making the content fill up an entire page in the resulting PDF.

In the CSS I've set the width and height to 2480 X 3508 pixels (a4 300 dpi) and when creating the PDF I use 0 for margins but still end up with a small white border to the right and bottom. Also tried to use mm and percentage but with the same result.

I'd need someone to please provide an example on how to style the HTML and what options to use at command line so that the resulting PDF pages fill out the entire background. One way might be to include bleeding (this might be necessary anyway) but any tips are welcome. At the moment I am creating one big HTML page (without CSS page breaks - might help?) but if needed it would be fine to generate each page separately and then feed them all to wkhtmltopdf.

1
  • 1
    hi, did you manage to fix this problem?
    – user961627
    Sep 24, 2012 at 9:16

9 Answers 9

53

wkhtmltopdf v 0.11.0 rc2

What ended up working:

wkhtmltopdf --margin-top 0 --margin-bottom 0 --margin-left 0 --margin-right 0 <url> <output>

shortens to

wkhtmltopdf -T 0 -B 0 -L 0 -R 0 <url> <output>

Using html from stdin (Note dash)

echo "<h1>Testing Some Html</h2>" | wkhtmltopdf -T 0 -B 0 -L 0 -R 0 - <output>

Using html from stdin to stdout

echo "Testing Some Html" | wkhtmltopdf -T 0 -B 0 -L 0 -R 0 - test.pdf

echo "Testing Some Html" | wkhtmltopdf -T 0 -B 0 -L 0 -R 0 - - > test.pdf

What did not work:

  • Using --dpi
  • Using --page-width and --page-height
  • Using --zoom
1
  • you will loose resolution of background image without dpi , zoom . do you know how to fix that ? am using svg to be rendered here. with back ground and many objects in it
    – shareef
    Oct 30, 2017 at 15:10
13

We just solved the same problem by using the --disable-smart-shrinking option.

10

I realize this is old and cold, but just in case someone finds this and has the same/similar problem, here's a workaround that worked for me after some trial&error.

I created a simple filler.html as:

<!DOCTYPE html>
<html>
<head>
</head>
<body style="margin: 0; padding: 0;">
<div style="height: 30mm; background-color: #F7EBD4;">
&nbsp;
</div>
</body>
</html>

Use valid HTML (!DOCTYPE is important) and only inline styles. Match the background color to that of the main document and use height equal or bigger than your margins.

I run version 0.12.0 with the following arguments:

wkhtmltopdf --print-media-type --orientation portrait --page-size A4
 --encoding UTF-8 --T 10mm --B 10mm --L 0mm --R 0mm
 --header-html filler.html --footer-html filler.html - - <file.html >file.pdf

Hoping this helps someone...

1
  • Thanks - if you render with margins then having the dummy div with a fixed height to match the margins is a key point. Thank you so much for this! I spent hours trying to solve my rendering problem.
    – rmcsharry
    Feb 28, 2017 at 16:43
8

At http://code.google.com/p/wkhtmltopdf/issues/detail?id=359 I found out more people 'suffer' from this bug. The --dpi 300 workaround did not work for me, I had to set --zoom 1.045 to zoom in a bit which made the extra right and bottom border disappear...

4
  • Similar here - was trying to use a full page (8.5 x 11 in) div as a container, and was only getting roughly 8 3/16 x 10 7/16. Zoom of 1.045 made everything behave.
    – Andrew
    Oct 22, 2013 at 18:14
  • zoom factor of 1.17647 worked for me (8.5 x 11 inches) got the factor here: code.google.com/p/wkhtmltopdf/issues/detail?id=408#c9 Nov 28, 2013 at 15:22
  • These issue links are now dead
    – Eric
    Sep 21, 2015 at 17:59
  • 8.5 x 11 in in landscape on Windows 7 required a zoom of 1.25 for me (wkhtmltopdf 0.12.3.2 (with patched qt)). And then I realized I had disable-smart-shrinking set to False. Changing that to True (shutting off smart shrinking) and 1.045 work here as well.
    – Tom
    Apr 14, 2017 at 15:12
7

I'm using version 0.12.2.1 and setting:

body { padding: 0; margin 0; }
div.page-layout { height: 295.5mm; width: 209mm;}

worked for me.

Of course need to add 0 margins by:

wkhtmltopdf -T 0 -B 0 -L 0 -R 0
1
6

Works fine for me with -B 0 -L 0 -R 0 -T 0 options and using your trick of setting up an A4 sized div.

Did you remember to use body {margin:0; padding:0;} in the top of your CSS?

I cannot help you with CSS page breaks as I have not trialled an errored those yet, however, you can run scripts on the page to do clever things. Here is a jQuery example of how to split content down into page size chunks based on the length of the content. If you can get that adapted to work with wkhtmltopdf then please post here!

http://www.script-tutorials.com/demos/79/index.html

3

What you are experiencing is a bug.

You'll need to set the --dpi option when converting the file. In you case you will probably want --dpi 300, but that can be set lower.

0

Solved it by increasing the DPI

I'm working with an A4 size in portrait mode. Had white space to the right.

I noticed that as the dpi is increased, the white space got thinner. at 300 dpi the white space is not visible in chrome pdf view at (max) zoomed at 500%

In Adobe reader it's still visible. It got better at 600 DPI and at 1200 DPI it's become invisible even at 6500% zoom.

There's no disadvantage to this so far as I observed, all dpi generate the same file size and run at the same speed (tested on 1 page).

effectively my settings are as follows:

echo "<html style='padding=0;margin=0'><body style='background-color:black;padding=0;margin=0'></html>" | wkhtmltopdf -T 0 -B 0 -L 0 -R 0 --disable-smart-shrinking --orientation portrait --page-size A4 --dpi 1200 - happy.pdf
0

If using an unscaled PNG image (thus will be pixel perfect) the default ratio, for an A4 needs to be 120ppi thus @ 210mm = 993 pixels wide x 1404 pixels high, if the source is 72 or 300 dpi it makes no difference for a default placement, its the 993 that's counted as 210 mm

No heights, no width, no stretch, nor shrink just default place image as background un-scaled.

wkhtmltopdf --enable-local-file-access -T "0mm" -L "0mm" -R "0mm" -B "0mm" test.html test.pdf

here is such an image reduced into A 4 pdf page 2 different densities same number of pixels

enter image description here enter image description here

If you use scaling you can use different density values, but this is all that is needed by default's, since PDF works on overall pixel values not DPI as such. Note the PNG is actually smaller by insertion in a PDF than the source JPG which was over 372 KB

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.