Question

I am using PHP, Mysql, jQuery. I have a webpage that is to be converted into high-res A4 size PDF: http://optisolbusiness.com/funeral_site/sample/index/id/255.

I have converted the HTML to PDF using wkhtmltopdf, which works great.

Here is the generated PDF http://optisolbusiness.com/Guru/Gurupdf/optisol.pdf. But the HTML is not fitting exactly to PDF size; There are spaces around the HTML in PDF. How to scale HTML to fit A4 PDF size 100%? Importantly the content inside the html (ie) text size, images width and height, background images also to be scaled proportionally.

Answer 1

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)