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

Question

我使用的是 Puppeteer v1.6.0，在使用 displayHeaderFooter:true 创建 PDF 时，页眉和页脚未显示在第一页上。选项，知道如何启用它吗？

Answer 1

根据Puppeteer Documentation :

page.pdf(options)

• options <Object> Options object which might have the following properties:
  • displayHeaderFooter <boolean> Display header and footer. Defaults to false.
  • headerTemplate <string> HTML template for the print header. Should be valid HTML markup with following classes used to inject printing values into them:
    • date formatted print date
    • title document title
    • url document location
    • pageNumber current page number
    • totalPages total pages in the document
  • footerTemplate <string> HTML template for the print footer. Should use the same format as the headerTemplate.
  • margin <Object> Paper margins, defaults to none.
    • top <string> Top margin, accepts values labeled with units.
    • right <string> Right margin, accepts values labeled with units.
    • bottom <string> Bottom margin, accepts values labeled with units.
    • left <string> Left margin, accepts values labeled with units.
• returns: <Promise<Buffer>> Promise which resolves with PDF buffer.

NOTE Generating a pdf is currently only supported in Chrome headless.

NOTE headerTemplate and footerTemplate markup have the following limitations:

1. Script tags inside templates are not evaluated.
2. Page styles are not visible inside templates.

因此，请确保您使用的是 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',
  },
});