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创建一个带木偶的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。

Answer 2

  // 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（至少 font-size: 0 默认为 bcze）。

有关更多信息，请参阅此问题： https://github.com/puppeteer/puppeteer/issues/1822

Answer 3

只是碰到了这个问题。

我对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,
    })
}

在此示例中，基数为64的图像被截断了。借助https://www.base64-image.de 这样的在线base-64转换器，可以转换图像。

Answer 4

如果以上代码对您不起作用。请尝试使用marginTop和marginBottom代替margin对象。

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, 
         marginTop:"100px",
         marginBottom: "100px"
    });

注释：它在nodejs中对我有用。我将jsreport与配方“ chrome-pdf”一起使用。使用puppeteer的chrome-pdf模块。

Answer 5

您需要使用：

-webkit-print-color-adjust: exact;

这是一个可以添加背景的函数示例：

const getHeaderFooter = () => {
   return `<html>
             <style>html {-webkit-print-color-adjust: exact;} </style>
             <span style="margin: -5em 0 0 0; height: 3mm; z-index: 1000; 
                    background: blue; width: 100%;"/>
          </html>`
}

并调用函数：

 headerTemplate: getHeaderFooter(),

puppeteer标题和footertemplate不起作用

5 个答案: