在 puppeteer 中的所有页面上呈现标题

Question

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

有没有解决方案让标题出现在每个页面上而没有错误？

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