javascript - How to load a header template image when generating PDF using Puppeteer in Node.js? - Stack Overflow

admin管理员组

文章数量:1404924

My Puppeteer version is v24.4.0.

const imgBase64 = readFileSync(imgPath).toString("base64");
const headerTemplate = `
<div style="width:100%; height: 50px;">
  <img src="data:image/png;base64,${imgBase64}" alt="logo">
</div>`;
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.setContent(htmlContent, { waitUntil: "networkidle0" });
await page.pdf({
   path: outputPath,
   format: "A4",
   displayHeaderFooter: true,
   margin: { top: "390px", bottom: "150px", left: "20px", right: "20px" },
   headerTemplate: headerTemplate,
   footerTemplate: footerTemplate,
   printBackground: true,
});

await browser.close();

This is the Node.js code for generating PDF involving image in header. But it occurs in error like this:

ProtocolError: Protocol error (Page.printToPDF): Printing failed

How to solve this issue?

My Puppeteer version is v24.4.0.

const imgBase64 = readFileSync(imgPath).toString("base64");
const headerTemplate = `
<div style="width:100%; height: 50px;">
  <img src="data:image/png;base64,${imgBase64}" alt="logo">
</div>`;
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.setContent(htmlContent, { waitUntil: "networkidle0" });
await page.pdf({
   path: outputPath,
   format: "A4",
   displayHeaderFooter: true,
   margin: { top: "390px", bottom: "150px", left: "20px", right: "20px" },
   headerTemplate: headerTemplate,
   footerTemplate: footerTemplate,
   printBackground: true,
});

await browser.close();

This is the Node.js code for generating PDF involving image in header. But it occurs in error like this:

ProtocolError: Protocol error (Page.printToPDF): Printing failed

How to solve this issue?

• javascript
• node.js
• pdf
• puppeteer

Share Improve this question Follow edited Mar 10 at 3:52 ggorlen 58k88 gold badges114114 silver badges157157 bronze badges asked Mar 9 at 3:31 kevin Escalantekevin Escalante 1111 silver badge55 bronze badges 1

• Related: [Bug]: Error when parsing page to PDF: ProtocolError: Protocol error (Page.printToPDF): Printing failed and Puppeteer | Protocol error (Page.printToPDF): Printing failed – ggorlen Commented Mar 10 at 4:01

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I do not have a good answer for this, but I can tell you that it seems like the assets in the header/footer need to be in the body as well, otherwise the PDF fails to render. I am working through this issue currently.

Adding the same image tag to the base htmlContent but with a display;none allows it to render properly.

本文标签： javascriptHow to load a header template image when generating PDF using Puppeteer in NodejsStack Overflow