Puppeteer 页脚仅显示在最后一页

Question

我对 Puppeteer 的 footerTemplate 参数有疑问：页脚只显示在文档的最后一页。我希望它显示在文档的每一页上（嗯...页脚）。

也许我没有正确使用参数？

这是我生成的 Puppeteer pdf 文件：

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://localhost:8000/?' + parameters);
await page.pdf({
    path: path,
    format: 'A4',
    displayHeaderFooter: true,
    footerTemplate: '<h1>THIS IS A TEST</h1>'
});
await browser.close();

感谢您的帮助！

Answer 1

这是一个奇怪的问题，但能够重现它。

当搜索文本 "THIS IS A TEST" 时，发现它的频率与 PDF 中的页数一样多...但只有最后一页的文本 "THIS IS A TEST" 有颜色。

尝试CTRL+F或CMD+F 并搜索 "THIS IS A TEST".

查看文档中存在但未显示的页面（因搜索而标记）：

但是在最后一页是可见的：

gitHub 上有一个与您的 puppeteer/issues/1853

相关的未解决问题

Answer 2

根据我使用 lib 的经验，页眉/页脚位于页面内容之后。尝试设置一些边距以使其可见：

await page.pdf({
    path: path,
    format: 'A4',
    displayHeaderFooter: true,
    footerTemplate: '<h1>THIS IS A TEST</h1>',
    margin : {
            top: '20px',
            right: '20px',
            bottom: '20px',
            left: '20px'
        };
});

Answer 3

我遇到了这个问题，我需要更改我的页边距

marginTop: 100,
marginBottom: 70

至

margin: {
        top: '100px',
        bottom: '70px',
    }

Answer 4

我也遇到了这个问题，puppeteer 的边距设置对我不起作用，因为我的整个网页都是 table。因此，即使我在 puppeteer 中设置了底部边距，页脚仍然在内容下方。我用以下 CSS:

修复了它

@media print {
    @page {
        margin-bottom: 1.5rem;
    }
}

Puppeteer 页脚仅显示在最后一页

Puppeteer footer only display on last page

node.js

google-chrome-headless

puppeteer