在 Node Puppeteer 中为 PDF 的每一页添加页眉答案

【问题标题】：Adding Header to Each Page of PDF in Node Puppeteer在 Node Puppeteer 中为 PDF 的每一页添加页眉
【发布时间】：2021-08-26 19:50:12
【问题描述】：

我正在尝试将标题部分打印到生成的 PDF 的每一页。我还使用 pdf-merger 将多个 PDF 合并在一起。现在，当我执行此代码时，生成的 PDF 包含多个文档，正如预期的那样。但是，我添加的 Header 部分似乎只出现在作为完整 PDF 一部分的文档的第 2 和第 5 中。我无法通过查看我的代码来判断为什么会发生这种情况。我假设Header 将被添加到每个文档中。

第一个问题：为什么我会注意到自己的行为。了解这将帮助我知道要调整什么。第二个问题：如何调整此代码，以便将Header 添加到文档的每个页面？

这是我将选项传递给page.pdf()的部分：

let doc = await page.pdf({
  displayHeaderFooter: true,
  format: "A4",
  printBackground: true,
  headerTemplate: '<span style="font-size: 30px; width: 50px; height: 50px; color:black; margin: 20px;">Header</span>', 
});

这是完整的代码块：

let merger = new PDFMerger();

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    let recordNum = 1;
    for (let r of recordsArr) {
      try {
        let signatures = [];
        signatures = await signatureService.getSignatures({}, [r.guid]);
        if (signatures.length) r.signatureBase64Str = signatures[0].value;
      } catch (err) {
        console.log(err);
        return Response.Failure("Error occurred while obtaining signature.", err);
      }
      r.logoBase64Str = base64Logo;
      if (r.goalNotes.length) {
        for (const [i, value] of r.goalNotes.entries()) {
          value.number = i + 1;
        }
      }
      try {
        console.log(`processing record ${recordNum} of ${recordsArr.length}`);
        const content = await compile(r);
        await page.setContent(content);
        await page.emulateMediaType("screen");
        let doc = await page.pdf({
          displayHeaderFooter: true,
          format: "A4",
          printBackground: true,
          headerTemplate: '<span style="font-size: 30px; width: 50px; height: 50px; color:black; margin: 20px;">Header</span>', 
        });
        merger.add(doc);
        ++recordNum;
      } catch (error) {
        console.log(error);
        return Response.Failure("Unable to generate PDF by parameters passed.");
      }
    }

【问题讨论】：

大部分代码调用了我在任何地方都没有定义的函数。当我把所有这些都去掉时，它基本上对我有用。你能提供一个可运行的minimal reproducible example吗？谢谢。

标签： puppeteer pdfmerger

【解决方案1】：

很难判断您的代码有什么问题，因为有很多函数未定义，但这里有一个最小的、可运行的示例，它使用与您相同的 PDF 合并包将标题添加到所有页面：

const PDFMerger = require("pdf-merger-js");
const puppeteer = require("puppeteer");

const headerTemplate = `<span style="font-size: 30px; width: 200px; height: 200px; background-color: black; color: white; margin: 20px;">Header</span>`;
const mockContent = Array(10).fill().map((_, i) => `<div>page ${i}</div>`);
const filename = "merged.pdf";
const pdfSettings = {
  displayHeaderFooter: true,
  format: "A4",
  printBackground: true,
  headerTemplate, 
  margin: {top: "100px", bottom: "100px"},
};

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const merger = new PDFMerger();

  for (const content of mockContent) {
    await page.setContent(content);
    merger.add(await page.pdf(pdfSettings));
  }

  await merger.save(filename);
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;

【讨论】：