css: rendering page numbers in HTML footer for printed PDF page (Chromium)

Question

My workflow for dynamically generating PDF:

1. Handlebars compiles HTML
2. I add a "fake footer" to this HTML using the CSS trick with position: fixed on a normal <div> element that actually appears in HTML only once
3. Puppeteer (so, headless Chromium browser) is used to generate a PDF out of this HTML page (I know the git version of Puppeteer has automatic footer insertion; for complicated reasons I am stuck with the npm version which does not support this yet).

My problem is how to add page numbers in this footer. I have tried the counter-reset + counter-increment solution, but this does not increment the page counter since, from its point of view, there is only one HTML element on which it is applied.

So I get a footer that says "Page 1" on each page of the generated PDF.

The HTML element:

...
<div class="page-footer"></div>
...

The CSS styling:

.report {
  counter-reset: pageIndex 0;

  .page-footer:before {
    content: "Page: " counter(pageIndex);
    counter-increment: pageIndex +1;
  }

  .page-footer {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     border-bottom: solid 1px;
  }
  ...
}

Does something like this actually work on Chromium, or am I just wasting my time?

Answer 1

I'm not familiar with your tools, but I've done some HTML to PDF stuff myself. Sounds like your single HTML is getting rendered with the page number in the footer (correctly, as there's only one page at this point), and the separate PDF pages are being created through a 'print to document' type conversion.

My suggestion then would be to pop your existing CSS rule into an @media print query, this should number the pages as they are created by the PDF print process.