I am looking to utilise the custom css counter to create my own counter inside the footer of Puppeteer as oppose to using the default pageNumber class, the reason being is that I have a use case where I need to convert multiple urls to PDF's and then merge those PDF's in to a single document which contains chapters, table of contents and much more so if I use the default page numbering then I end up with the page number starting at page 1 on each generated PDF URL.

See example below of default page numbering behaviour.

PDF URL 1

• Page 1
• Page 2
• Page 3

PDF URL 2

• Page 1

PDF URL 3

• Page 1
• Page 2

I need to be able to customise what number is displayed in the footer at the time I generate each PDF myself or at least the starting number and have it increment from that number automatically, This allows me to start the page numbers at a higher number than 1 for each PDF after the first one is generated.

So I attempted to inject custom css using the print @page selector prior to generating the footer template when I converted the page to PDF but it produced a blank result. I have a feeling that the footer template styling is rendered in isolation and not picking up the custom @page css I am injecting at the head element, even if I inject the css inline at the footer template that won't work because the counter I assume will just be the same number for each page.

const puppeteer = require('puppeteer');

const browser = await puppeteer.launch({ headless: true })
const page = await browser.newPage()
var file = '/path/to/pdf/xxx.pdf';

var urls = [
  'www.example1.com',
  'www.example2.com',
  'www.example3.com'
]

for (var i = 0; i < urls.length; i++) {
  await page.goto(urls[i], { waitUntil : 'networkidle2' })
  await page.addStyleTag({ content: "@page { counter-increment: page } .pageNumbers { content: counter(page) }" })

  // generate PDF
  await page.pdf({
    path: file,
    format: 'A4',
    displayHeaderFooter: true,
    headerTemplate: `<div style="height:100px;min-width:100%;">&nbsp;</div>`,
    footerTemplate: `<span style="width: 100%; font-size: 14px; width: 50px; height: 50px; color:black; margin: 0px 20px; display:inline;" class="pageNumbers"></span>`,
    margin: { top: '100px', bottom: '100px' }
  })
}

// kill 
await browser.close();

The merge happens after the above but it has no capabilities to handle page numbering as far as I can tell, I am using Easy PDF Merge.

I am hoping there is someone else who has had a similar use case and can point me in the right direction on how to get around the limitations of Puppeteer's footer templates?