Big differences between PDF page and preview/Print button page

[Yamen_Zakhour]

The difference is because PDFs are rendered using wkhtmltopdf which does not support latest CSS, whereas printing is based on how your browser renders the print format.

Why use PDF? Because wkhtmltopdf supports injecting headers, footers and page numbers whereas browsers can not tell how many pages your content will span (thus the endless paper preview).

How to achieve a similar layout on both PDF & Prints

• Option 1: Use Print Designer, the most beginner friendly solution. However the designer is still in beta so there might be some bugs.

• Option 2: Use Chrome Headless rendering for PDF (more on this below)

• Option 3: Add vendor prefixes to your CSS (specially flex/grid) to make sure your current wkhtmltopdf can understand them. Search for online prefixing tools.

How to apply Headers, Footers & Page Numbering on Prints

• Not very straightforward solution, but it can be done through Custom Print Formats, as explained below.

For more on this or to use Chrome Headless, refer to this

How to avoid Custom print lay out Screen, Print and PDF format differences

You can use Chrome Headless to render PDF. Chrome Headless will maintain consistency across prints and PDF. However chrome headless does not support repeating headers and footers or page numbering. To have repeating headers and footers you can structure your print format as the following: To add page numbering; Of course these should be done in a custom print format.