如何使用Puppeteer API在生成PDF时设置页面编号(页码)?
时间: 2024-10-22 10:26:43 浏览: 87
在使用Puppeteer这个Node.js库生成PDF时,Puppeteer本身并不直接提供添加页眉或页脚的功能,包括设置页面编号。但是你可以通过一些额外步骤结合HTML、CSS以及JavaScript来实现类似功能。
首先,你需要创建一个包含页码的自定义HTML模板。例如:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.page-number {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<!-- 其他内容 -->
<div class="page-number">Page {{pageNumber}}</div>
<!-- PDF的内容 -->
</body>
</html>
```
然后,在Puppeteer的`page.pdf()`方法之前,你需要先动态渲染这个模板,并将页码插入到页面中。这通常涉及到创建一个新的`puppeteer.Page`实例,加载HTML,处理JavaScript(更新页码变量),然后再导出为PDF。示例代码如下:
```javascript
const puppeteer = require('puppeteer');
async function generatePdfWithPageNumber(title) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 设置页面标题
await page.goto(`data:text/html,'<html><title>${title}</title></html>`);
// 自定义HTML并注入页码
const html = await page.evaluate(() => `
document.body.innerHTML = `
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.page-number {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="page-number">Page {{pageNumber}}</div>
<!-- 这里可以放置你的实际内容 -->
</body>
</html>`;
return document.querySelector('.page-number').innerText;
}, {pageNumber: 1}); // 初始页码设为1
await page.setContent(html);
// 生成PDF
const pdfBuffer = await page.pdf({path: `report_${title}.pdf`, format: 'A4', printBackground: true});
browser.close();
return pdfBuffer;
}
generatePdfWithPageNumber('Example Report').then(pdf => console.log('PDF generated successfully'));
```
请注意,这种方法依赖于浏览器支持的特性,因此并非所有浏览器都保证会工作,特别是对于复杂的页码逻辑,可能需要额外的JavaScript处理。
阅读全文