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

[Yamen_Zakhour]

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:

Print format add auto page number

<table style="min-height: var(--page-height); width: var(--page-width)"> <thead class="print-head" style="height: var(--header-height);> <tr> <td> </td> </tr> </thead> <tbody class="print-body"> <tr> <td> </td> </tr> </tbody> <tfoot class="print-foot" style="display: table-footer-group;"> <tr> <td id="footer-spacer" style="height: var(--footer-height);"></td> </tr> <…

To add page numbering;

Print format add auto page number

This should work for A4 sized pages <script> window.onload = function() { const pageHeightPx = 1122.510; const headerHeight = document.querySelector('.print-head').getBoundingClientRect().height; const footerHeight = document.querySelector('.print-foot').getBoundingClientRect().height; const actualPageHeightPx = pageHeightPx - headerHeight - footerHeight - 169; const bodyElement = document.querySelector('.print-body'); const currentBodyHeight = bodyElement.getBoundingCl…

Of course these should be done in a custom print format.