css - puppeteer header 和 footertemplate 不起作用

Question

这是我创建 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 与 puppeteer 创建 pdf？在他们的 API 描述中，这看起来很明显，但实际上不起作用。

https://github.com/GoogleChrome/puppeteer/blob/v1.3.0/docs/api.md

Answer 1

请尝试以下模板:

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。