repeated headers and page numbers not working reliably

1 day ago 1
ARTICLE AD BOX

I am building an Electron (Vite + React) desktop application and need to generate professional A4 print/PDF output.

The requirement is to:

show the same header on every page (title, logo, reference, date)

include page numbers at the bottom (e.g. C-1, C-2, etc.)

have this work reliably on both macOS and Windows

I am currently using Electron’s built-in printing and PDF generation.

In the main process, I create a hidden BrowserWindow, load a generated HTML file, and then call print or printToPDF.

await win.webContents.printToPDF({ printBackground: true, pageSize: 'A4', preferCSSPageSize: true });

The HTML is styled for A4 printing using CSS like this:

@page { size: A4; margin: 15mm; }

I have tried multiple approaches to repeat the header and add page numbers:

using position: fixed for the header with body padding

using table layout with <thead\> and display: table-header-group

using CSS @page margin boxes and counters for page numbers

manually splitting content into page-sized sections with page-breaks

However, none of these approaches are reliable in Electron (Chromium):

headers are not consistently repeated on every page

CSS margin boxes (e.g. bottom-center with counter(page)) do not render page numbers

- manual pagination becomes fragile for longer documents

Environment:

Electron 38.8.4

electron-builder 26.8.1

tested on macOS (must also work on Windows)

My question is:

For a production Electron application, what is the most robust way to:

repeat a header on every page in printed/PDF output

add reliable page numbers

Is there a known working pattern using Electron print/printToPDF, or is this a limitation of Chromium?

If it is a limitation, is the recommended approach to generate PDFs programmatically (e.g. Puppeteer or a PDF library) instead of relying on printToPDF?

I cannot share full application code due to confidentiality, but the simplified snippets above reflect the actual implementation pattern.

Any guidance or examples from production use would be greatly appreciated.

Read Entire Article