Google chrome 木偶演员页眉和页脚未显示在第一页上

我使用的是Puppeter v1.6.0，当使用

displayHeaderFooter:true

选项创建PDF时，页眉和页脚不会显示在第一页上，您知道如何启用此选项吗？

根据：

page.pdf（选项）

• options

  options对象，该对象可能具有以下属性：

  • displayHeaderFooter

    显示页眉和页脚。默认值为

    false

  • headerTemplate

    HTML打印头模板。应为有效的HTML标记，并使用以下类将打印值注入其中：

    • 日期

      格式化打印日期

    • 标题

      文件标题

    • url

      文档位置

    • 页码

      当前页码

    • totalPages

      文档中的总页数

  • 页脚模板

    打印页脚的HTML模板。应使用与

    标题模板相同的格式

  • 页边距

    纸张页边距，默认为无。

    • top

      top页边距，接受标有单位的值

    • right

      right margin，接受标有单位的值

    • bottom

      bottommargin，接受标有单位的值

    • left

      left margin，接受标有单位的值
• 返回：使用PDF缓冲区解析的承诺

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

---

注意

标题模板

和

页脚模板

标记有以下限制：

模板内的脚本标记不会被计算

页面样式在模板中不可见

---

因此，请确保您正确使用了

displayHeaderFooter

、

headerTemplate

和

footerTemplate

选项，以便正确生成PDF

此外，请确保通过CSS设置页眉和页脚的字体大小（可能需要使用内联CSS），并设置网页的

边距

选项，以确保网页内容不会覆盖页眉和页脚

示例：

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

wait page.pdf({
路径：“example.pdf”，
displayHeaderFooter:对，
headerTemplate:“”，
页脚模板：“”，
保证金：{
顶部：“100px”，
底部：“200px”，
右：'30px'，
左：“30px”，
},
});

非常感谢！问题是，我不仅要在《木偶戏》中设置页边，还要在实际页面中设置页边！对于我来说仍然没有太多的意义，为什么它的页眉/页脚显示在所有页面上，但在第一个页面上，但无论如何，这是解决方案…

我使用jsreport在nodejs中呈现pdf。生成pdf时，headerTemplate和footerTemplate不呈现有问题。有很多代码示例可供使用

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

但这对我不起作用。我一直搜索了两天，直到我去看UnitTestingforChromePDF。这里是链接

它看到的代码如下，它为我工作。我需要使用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
      },

const resp=await jsreport.render({
模板：{
内容：{#asset src/storages/htmls/pdf/master card.html}，
发动机：“把手”，
配方：“chrome pdf”，
pdfPassword:{
主动：对，
密码：“1234”
},
铬：{
displayHeaderFooter:对，
headerTemplate:“”，
footerTemplate:`第页，共页'，
格式：“A4”，
marginTop:'80px'，
marginBottom:'80px'
},
//模板引擎使用的javascript辅助函数
助手：助手
},

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

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

---

嗯…我需要查找原始的边距值。花了一些时间找到了chrome的默认匹配：

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

---

这可能与字体大小有关。看一看：我必须在页脚和页眉上添加-webkit print color adjust:exact；以使颜色正常工作。尝试添加-

{“displayHeaderFooter”：true，“footeTemplate:”。页脚{-webkit print color adjust:exact；color:#000！important}©2020，一些页脚文本。“，“headerTemplate”：“}

1.-webkit打印颜色调整：精确；2.带有类别3的样式标记。存在内联样式页脚文本，但文本颜色不是黑色。不可见。