Javascript 在生成PDF时在Puppeter页脚上使用自定义CSS计数器

我希望使用自定义css计数器在Puppeter的页脚内创建我自己的计数器，而不是使用默认类，原因是我有一个用例，需要将多个URL转换为PDF，然后将这些PDF合并到包含章节的单个文档中，目录，更重要的是，如果我使用默认的页码，那么在每个生成的PDF URL上，我的页码从第1页开始

请参见下面的默认页面编号行为示例

PDF网址1

• 第1页
• 第2页
• 第3页

PDF网址2

• 第1页

PDF网址3

• 第1页
• 第2页

我需要能够自定义在我自己生成每个PDF时页脚中显示的数字，或者至少是起始数字，并自动从该数字开始递增，这允许我在生成第一个PDF后，以高于1的数字开始每个PDF的页码

因此，当我将页面转换为PDF时，我尝试在生成页脚模板之前使用打印选择器插入自定义css，但结果为空。我有一种感觉，页脚模板样式是独立呈现的，而不是在head元素中注入的自定义@page css，即使我在页脚模板中内联注入css也不起作用，因为我假设每个页面的计数器都是相同的数字

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();

const puppeter=require（'puppeter'）；
const browser=wait puppeter.launch（{headless:true}）
const page=wait browser.newPage（）
var file='/path/to/pdf/xxx.pdf'；
变量URL=[
“www.example1.com”，
“www.example2.com”，
“www.example3.com”
]
对于（var i=0；i

合并发生在上述操作之后，但据我所知，它没有处理页面编号的功能，我正在使用

我希望有其他人有类似的使用案例，可以为我指出正确的方向，如何绕过木偶演员的页脚模板的限制