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.
