Question

我正在使用Puppeteer v1.6.0，并且使用displayHeaderFooter:true选项创建PDF时，在第一页上没有显示页眉和页脚，您知道如何启用它吗？

Answer 1

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>左边距，接受标有单位的值。





返回：<Promise <Buffer >> Promise通过PDF缓冲区解决。



注意当前仅在Chrome headless中支持生成pdf。




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


不评估模板中的脚本标签。

页面样式在模板中不可见。

因此，请确保正确使用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

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

Answer 3

我在jsjs中使用jsreport渲染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',
        },

木偶页眉和页脚未显示在首页上

5 个答案:

page.pdf（选项）