页眉和页脚未在 puppeteer 生成的 pdf 中应用 css

Question

我正在向 puppeteer 生成的 pdf 添加页眉和页脚模板，但我添加的 css 并未完全应用。

await page.pdf({
  path: filePath,
  format : 'A4',
  printBackground : true,
  margin : { top : 35, bottom: 45},
  displayHeaderFooter : true,
  headerTemplate : `
    <div style="height: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 6px; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0.5px;">
      <span class="date"></span>
      <span class="title"></span>
      <span class="pageNumber"></span>
    </div>`,
  footerTemplate : `<span class="pageNumber" style="font-size: 20px;"></span>`
})

我已经在浏览器中测试过这个 html 给出了正确的输出。 此外font-size正在响应，但不像在浏览器中那样。 即我在浏览器中给出了font-size : 16px ，它显示得非常完美，但在生成的 pdf 中具有相同的值，字体太大了。

我期望工作的是justify-content ，但一切都在左侧。

它会响应哪个 CSS？

Answer 1

尝试在 div 样式中添加width: 100%

<div style="width: 100%; display: flex; align-items: center; justify-content: space-between;">