Wkhtmltopdf CSS Sizes in Cm/Mm

Page size in PDF generated by wkhtmltopdf is 25% smaller than expected

This argument to wkhtmltopdf solved the issue:

--disable-smart-shrinking

Not so smart after all.

wkhtmltopdf Knp-snappy custom height/width which unit is expected?

--page-width and --page-height take real world units (as in cm, not pixels)

--page-size takes values like "A4", "A5", "Letter", etc.

Although it's probably easier not to touch these values and just play around with the layout you're using, or maybe use --zoom, but I'd definitely go for tweaking the layout (maybe have a layout or CSS file specific for generating the PDF)

wkhtmltopdf with full page background

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

Scale HTML proportionally to fit exactly to PDF A4 size

Your background image is not exactly high-res, this won't look great in print.

I don't know wkhtmltopdf itself, but your body already has absolute dimensions set (in inches). This is probably the problem. Your body has a max size, the content has an absolute size too (given due to the background image pixel dimensions).

This is not a good starting point for html-to-print transformaions, and PDF is essentially print.

what to do (intermediate)

  • remove any size restrictions from body
  • wkhtml... has a switch called zoom, 1.5 should be an appropriate value to fill the page
  • use page-size a4

what to do (the "right" way)

  • remove size restrictions from body
  • build the background borders (the black ones) with html elements and css styling
    • refrain from defining "width" rules for those. You will only have to define a "width" once, all other widths should be set to "auto".
    • heights will prove troublesome, because divs are only as high as their content requires. But setting height: 100% does not respect border and margin sizes.
  • that yellow cross could be designed in css too, or a much higher resolution png/jpeg
  • Use only "real" dimensions. That means do not use pixels, use points, inches, or mm. You can use % values, but make sure those are % values of real dimensions (that means that at some point a parent element has a real dimension)


Related Topics



Leave a reply



Submit