puppeteer生成pdf页脚页码
时间: 2023-08-22 15:12:23 浏览: 57
要在 Puppeteer 中生成带有页脚和页码的 PDF,你可以使用 CSS 来自定义页脚样式,并在页面的底部插入页码。以下是一个示例代码:
```javascript
const puppeteer = require('puppeteer');
async function generatePDF(url, outputPath) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle0' });
// 在页面上注入自定义的 CSS 样式
await page.addStyleTag({
content: `
@page {
size: A4;
margin: 1cm;
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
}
}
`
});
await page.pdf({
path: outputPath,
format: 'A4',
displayHeaderFooter: true, // 显示页眉和页脚
footerTemplate: '<div style="font-size: 10px; text-align: center; padding-top: 10px;"></div>', // 自定义页脚模板
});
await browser.close();
}
// 使用示例
generatePDF('https://www.example.com', 'output.pdf');
```
在上面的示例中,我们使用 `page.addStyleTag()` 方法将自定义的 CSS 样式注入到页面中。在 CSS 样式中,我们使用 `@page` 规则来定义页面的大小和边距,并使用 `@bottom-center` 规则来指定页脚内容。我们使用 CSS 的 `counter()` 函数来显示当前页码和总页数。
在 `page.pdf()` 方法中,我们设置 `displayHeaderFooter` 为 `true` 来显示页眉和页脚。我们还可以使用 `headerTemplate` 来定义自定义页眉模板。
请注意,生成带有页脚和页码的 PDF 可能会增加生成时间,特别是在包含大量页面的情况下。