puppeteer标题和footertemplate不起作用
这是我创建pdf的代码.一切都很好,除了页脚和标题不起作用.他们在那里(我认为)但不可见.我尝试过使用displayHeaderFooter:true,但所有这些都是标题中的日期标记和页脚中的一些破解的html代码(如上图所示).
async function createListenPdf(html, header, footer) {
try {
var jobId = uuidv4();
this.browser = await puppeteer.launch();
const page = await browser.newPage();
var viewport = {
width:1165,
height:1200
}
page.setViewport(viewport);
page.on("console", msg => {
for (let i = 0; i < msg.args.length; ++i) {
console.log(`${jobId} - From page. Arg ${i}: ${msg.args[i]}`);
}
});
await page.goto(`data:text/html,${html}`, { waitUntil: 'networkidle0' });
await page.emulateMedia('screen');
console.log("Header footer");
var buffer = await page.pdf({
printBackground: true,
footerTemplate: "<div style='width: 200px; background-color: #4286f4; position: relative; position: absolute; top:0;'>Hej</div>",
headerTemplate: "<div style='width: 200px; background-color: #4286f4; position: relative; position: absolute; bottom: 0;'>Footer</div>",
//displayHeaderFooter: true,
margin:{
top: "100px",
bottom: "100px"
}
});
console.log(`${jobId} - Done. Will return the stream`);
return buffer;
}
finally {
if (this.browser) {
console.log(`${jobId} - Closing browser`);
this.browser.close();
}
}
}
你可以看到我以某种方式得到一个带有灰色区域的页脚(我不知道为什么它的灰色).当我在选项中启用displayHeaderFooter:true时,它看起来像这样:
有没有人设法使用带页眉和页脚的html创建一个带木偶的pdf？在他们的API描述中,它似乎非常明显但它确实不起作用.
https://github.com/GoogleChrome/puppeteer/blob/v1.3.0/docs/api.md
刚碰到这个问题。
我对headerTemplate/的观察footerTemplate如下：
- 至少
font-size必须指定（默认设置为 1px，非常小）：
headerTemplate: '<span style="font-size: 10px"> <span class="pageNumber"></span>/<span class="totalPages"></span></span>',
必须定义顶部/底部边距以设置页眉/页脚的空间
某些 CSS 属性确实不起作用。我没有成功
background-color，但也许是因为没有为这些部分绘制背景。不允许异步代码（需要 HTTP 请求），例如调用 CSS 样式表、加载图像或字体。
因此，CSS 必须被内联。要添加图像，可以对其进行base-64编码，如下所示。关于字体，我猜我们需要依赖于预期安装在Puppeteer服务器上的内容。也许有一种方法也可以将它嵌入base-64，我没有尝试。
const printPDF = async () => {
const footer = `<footer style="margin: auto; width: 40%">
<img style="float: left; marginRight: 8px; marginLeft: 36px; width: 25%" src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB...09Yv//Z" alt="Pivohub" />
<p style="font-family: arial; float: right; width: 55%; color: red; margin-top: 24px; font-size: 10px">
<b>My footer</b>
</p>
</footer>`
const content = `<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8"/>
<style type="text/css">
body { backgroundColor: "red" }
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>`
const browser = await puppeteer.launch({ headless: true })
const page = await browser.newPage()
await page.setContent(content, { waitUntil: "networkidle0" })
const buffer = await page.pdf({
format: "A4",
displayHeaderFooter: true,
headerTemplate: '<span style="font-size: 10px"> <span class="pageNumber"></span> of <span class="totalPages"></span></span>',
footerTemplate: footer,
margin: { top: "100px", bottom: "200px" },
printBackground: true,
})
}
在此示例中，base 64 图像被截断。借助在线 base-64 转换器（例如https://www.base64-image.de ），可以转换图像。
- 对于背景，我必须添加此样式以及页眉/页脚内容： html,body,div{-webkit-print-color-adjust: excact} (3认同)
请尝试使用headerTemplate:
headerTemplate: '<span style="font-size: 30px; width: 200px; height: 200px; background-color: black; color: white; margin: 20px;">Header 1</span>',
footerTemplate: '<span style="font-size: 30px; width: 50px; height: 50px; background-color: red; color:black; margin: 20px;">Footer</span>'
并非所有的样式属性的支持,你应该避免使用position,top,bottom.
另外请确保您使用的是最新版本 puppeteer
// or a .pdf file
await page.pdf({
printBackground: true,
width: `595px`, // ? 3508 x 2480 (print) || 595 pixels x 842 pixels (screen)
height: `842px`, // ? Here subraction for making alignment looks cool
margin: {
top: '25px',
bottom: '60px',
left: '25px',
right: '25px'
},
path: path.join(ROOT_PATH, 'pdf', 'report.pdf'),
displayHeaderFooter: true,
footerTemplate: `
<p style="margin: auto;font-size: 13px;">
<span class="pageNumber"></span>
/
<span class="totalPages"></span>
</p>
`
});
希望这能解决某人遇到同样问题的问题。页脚之前没有正确显示，最后做了一点搜索，所以有了上面的解决方案。
笔记：
- 不要忘记提及
margin-bottom: 60px（至少）。- 对于 也一样
displayHeaderFooter: true。- 必须需要指定
font-size: 10px（至少 bcze 默认为font-size: 0）。
有关更多信息，请参阅此问题： https ://github.com/puppeteer/puppeteer/issues/1822