javascript - 在 puppeteer 的所有页面上渲染标题

Question

当我将 displayHeaderFooter 设置为 true 时，标题将不会呈现。仅当我在 CSS 中将边距设置为 @page 时它才有效，但随后页面高度增加了边距值并且页面内容呈现在页面外部。

有没有解决办法让标题出现在每个页面都没有bug？

Answer 1

您可以使用 page.pdf 的 margin 选项设置内容的边距.默认情况下，所有边的边距都是 0，因此如果您设置没有边距的页眉，它将隐藏在页面内容后面。

您通过此选项设置的边距不会增加页面的高度。如果可能，我建议不要使用 CSS 中的 @page 规则，因为存在多个已知错误(有关更多信息，请参见 this answer)。

代码示例

这是一个最小的例子，它为所有页面设置一个标题并将边距设置为 20mm 以使其可见:

await page.pdf({
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size:5mm;">Your header text</div>',
    margin: {
        top: '20mm'
    },
    path: 'example.pdf'
});