ARTICLE AD BOX
Your current footer uses:
.report-footer { position: absolute; bottom: 10mm; }That only works for one .page div. It does not repeat automatically on every printed page when the browser splits the content. HTML/CSS printing does not work like Crystal Reports pagination.
For print footer on every page, use position: fixed inside @media print:
@media print { @page { size: A4; margin: 15mm 10mm 25mm 10mm; } body { margin: 0; padding: 0; background: white; } .page { width: auto; min-height: auto; border: none; margin: 0; padding: 0; padding-bottom: 25mm; } .report-footer { position: fixed; bottom: 8mm; left: 10mm; right: 10mm; height: 15mm; background: white; } table { page-break-inside: auto; } tr { page-break-inside: avoid; page-break-after: auto; } thead { display: table-header-group; } }For page numbers, add this:
.report-footer::after { content: "Page " counter(page); float: right; }Important: browser support for counter(page) is not reliable in Chrome/Edge. If you need accurate page numbers and guaranteed footer positioning, generate the PDF using a server-side HTML-to-PDF engine like wkhtmltopdf, DinkToPdf, QuestPDF, Rotativa, or Puppeteer.
Also remove the fixed A4 size from .page during print. This part causes many alignment issues:
.page { width: 210mm; min-height: 297mm; }Let the browser handle the printed page size through @page, not through a fixed .page container. Your current structure uses one .page wrapper with an absolutely positioned footer, so it cannot naturally repeat the footer on each generated page.
