PDF rendering recipes
Specific problems, verified solutions, and the failures worth not repeating.
Put a chart in a PDF generated from HTML
Inline JavaScript runs and paints before the page is captured, so canvas charts render. Verified output, with the library size ceiling that actually matters.
@page size ignored when rendering a PDF
If the CSS @page size and the API paper option disagree, the CSS wins. Verified in both directions, with the reason it is deliberate and how to control it.
Images not loading in a PDF rendered from HTML
The renderer fetches nothing external, so remote image URLs never load. Embed images as data URIs or upload them — and why that restriction is deliberate.
Stop a table splitting badly across PDF pages
Two CSS declarations keep table rows whole and repeat the header row on every page. Verified across a 90-row table paginated to three A4 pages.
Page numbers in a PDF from HTML
Chromium supports CSS margin boxes, so counter(page) works without a headerTemplate. Verified output, plus what to do when you also need a repeating header.
Repeat a header on every page of a PDF
Chromium cannot style headerTemplate with your stylesheet. Use display table-header-group instead — measured, with the position fixed failure recorded.
Watermark on every page of a PDF
Repeat a DRAFT or CONFIDENTIAL watermark across every page using table-header-group, with no header template and no image. Verified across three pages.