Puppeteer 页眉和页脚未显示在第一页上

Question

我使用的是 Puppeteer v1.6.0，当使用 displayHeaderFooter:true 选项创建 PDF 时，页眉和页脚未显示在首页上，知道如何启用此功能吗？

Answer 1

根据Puppeteer Documentation：

page.pdf(选项)

• options Object> 可能具有以下属性的选项对象：
  • displayHeaderFooter boolean> 显示页眉和页脚。默认为false。
  • headerTemplate string> 打印标题的 HTML 模板。应该是有效的 HTML 标记，具有以下用于将打印值注入其中的类：
    • date 格式化打印日期
    • title文档标题
    • url文档位置
    • pageNumber当前页码
    • totalPages 文档中的总页数
  • footerTemplate string> 用于打印页脚的 HTML 模板。应使用与headerTemplate 相同的格式。
  • margin Object> 纸张边距，默认为无。
    • top string> 上边距，接受标有单位的值。
    • right string> 右边距，接受标有单位的值。
    • bottom string> 下边距，接受标有单位的值。
    • left string> 左边距，接受标有单位的值。
• 返回：PromiseBuffer>> 用 PDF 缓冲区解析的 Promise。

注意目前仅 Chrome headless 支持生成 pdf。

---

注意 headerTemplate 和 footerTemplate 标记有以下限制：

1. 不评估模板内的脚本标签。
2. 页面样式在模板中不可见。

---

因此，请确保您正确使用 displayHeaderFooter、headerTemplate 和 footerTemplate 选项，以便正确生成 PDF。

另外，请确保您通过 CSS 设置页眉和页脚的字体大小（您可能需要使用内联 CSS），并设置网页的 margin 选项以确保网页的内容不掩盖页眉和页脚。

示例：

await page.pdf({
  path: 'example.pdf',
  displayHeaderFooter: true,
  headerTemplate: '<div id="header-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="date"></span><span class="title"></span><span class="url"></span><span class="pageNumber"></span><span class="totalPages"></span></div>',
  footerTemplate: '<div id="footer-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="date"></span><span class="title"></span><span class="url"></span><span class="pageNumber"></span><span class="totalPages"></span></div>',
  margin: {
    top: '100px',
    bottom: '200px',
    right: '30px',
    left: '30px',
  },
});

Answer 2

非常感谢！问题是我不仅要在 puppeteer 中设置边距，而且还要在实际页面中设置边距！对我来说仍然没有多大意义，为什么它的页眉/页脚显示在所有页面上，但在第一个页面上，但无论如何，这就是解决方案......

Answer 3

我使用 jsreport 在 nodejs 中渲染 pdf。当我生成我的 pdf 时，我遇到了 headerTemplate 和 footerTemplate 不呈现的问题。有很多代码示例可以使用

'margin': {
   top    : '100px',
   bottom : '200px',
   right  : '30px',
   left   : '30px'
}

但这对我不起作用。我一直在寻找两天，直到我去看 chrome-pdf 的统一。这里是链接https://github.com/jsreport/jsreport-chrome-pdf/blob/master/test/chromeTest.js。

它看到了如下代码，它对我有用。我需要使用 marginTop 和 marginBottom 而不是 margin 对象。

const resp = await jsreport.render({
      template: {
        content: '{#asset src/storages/htmls/pdf/master-card.html}',
        engine: 'handlebars',
        recipe: 'chrome-pdf',
        pdfPassword: {
          active: true,
          password: '1234'
        },
        chrome: {
          displayHeaderFooter: true,
          headerTemplate:'',
footerTemplate:`<h1>Page <span class="pageNumber"></span> of <span class="totalPages"></span></h1>`,
          format : 'A4',
          marginTop: '80px',
          marginBottom:'80px'
        },
        //javascript helper functions used by templating engines
            helpers: helper
      },

Answer 4

我通过添加边距解决了这个问题。页眉和页脚位于页面下方。

  margin: {
    top: '100px',
    bottom: '200px',
    right: '30px',
    left: '30px',
  },

Answer 5

嗯...我需要寻找原始边距值。花了一些时间，发现chrome的默认交配：

margin: {
          top: '0.39in',
          left: '0.39in',
          bottom: '0.38in',
          right: '0.38in',
        },