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

Question

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

Answer 1

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:

Script tags inside templates are not evaluated.

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',
  },
});

Answer 2

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

Answer 3

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

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

但这对我不起作用。我一直在寻找两天，直到我去看 chrome-pdf 的联合测试。这里 link 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',
        },

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

Puppeteer Header and Footer not displayed on first page

google-chrome

header

footer

puppeteer

page.pdf(options)