Puppeteer 页脚仅显示在最后一页答案

【问题标题】：Puppeteer footer only display on last pagePuppeteer 页脚仅显示在最后一页
【发布时间】：2018-10-03 18:52:58
【问题描述】：

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();

感谢您的帮助！

【问题讨论】：

标签： node.js puppeteer google-chrome-headless

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

marginTop: 100,
marginBottom: 70

到

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

【讨论】：

【解决方案3】：

根据我对库的经验，页眉/页脚位于页面内容的后面。尝试设置一些边距以使它们可见：

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

【讨论】：

就是这样！添加底部边距固定页脚不显示。我还添加了基于 Bernhard 问题的本地样式。谢谢！

【解决方案4】：

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

在搜索文本“这是一个测试”时，它的发现频率与 PDF 中的页数一样多...但只有在最后一页上，文本“这是一个测试”才有颜色。

尝试 CTRL+F 或 CMD+F 并搜索“这是一个测试”。

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

但在最后一页是可见的：

在 gitHub 上有一个与你相关的未解决问题 puppeteer/issues/1853

【讨论】：

是的，你是对的，“这是一个测试”真的在每一页上！该问题似乎是与您链接的样式问题相结合的边距问题。感谢您的帮助！