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
Force Last Div on a New Line with Flexbox
Margin Does Not Push Down Another Margin
Changing The Color of The Sliderinput in Shiny Walkthrough
Absolute Positioned Item in a Flex Container Still Gets Considered as Item in Ie & Firefox
How to Style Radio Button or Checkbox Inside a Bootstrap Table
Codemirror Cursor Position Offset
How to Capitalize First Letter Only Using CSS in Each Case
Chrome Not Picking Up @Font-Face Otf
CSS Images with Relative Url Sometimes Relative to Page Url in Ie
How to Make a Material UI Grid Element Sticky
Problem with Position Absolute in Ie7, Div Moves 10Px to The Right
Svg with Drop-Shadow Blurry on Mobile Browser