puppeteer header and footertemplate doesnt work

Just bumped into the issue.

My observations about headerTemplate/footerTemplate are the following:

  1. At least the font-size has to be specified (it's set to 1px by default, which is very small):
headerTemplate: '<span style="font-size: 10px"> <span class="pageNumber"></span>/<span class="totalPages"></span></span>',

  1. top/bottom margin must be defined to set space for the header/footer

  2. Some CSS properties indeed don't work. I didn't have any success with background-color, but maybe it's because the background isn't painted for these sections.

  3. No asynchronous code (that would require an HTTP request) is allowed, such as calling a CSS stylesheet, loading an image or a font.
    Consequently, CSS have to be inlined. To add an image, it can be base-64 encoded, as shown below. Concerning the fonts, we would need to rely on what is expected to be installed on the Puppeteer server I guess. Maybe there's a way to also embed it in base-64, I didn't try.

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

In this sample, the base 64 image was truncated. An image can be converted thanks to an online base-64 converter such as https://www.base64-image.de.


Please try the following templates: 

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>'

Not all styling properties are supported, you should avoid using position, top, bottom.

Also make sure you are on the latest version of 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>
    `
  });

Hopefully, this one resolved someone's issue with the same problem. The footer was not shown before properly and finally done about a little bit search so comes with the above solution.

NOTE:

  1. Don't forget to mentioned margin-bottom: 60px(atleast).
  2. Same for displayHeaderFooter: true.
  3. Must needs to specify the font-size: 10px(atleast bcze default by font-size: 0).

For more info refer to this issue: https://github.com/puppeteer/puppeteer/issues/1822

Tags:

Css

Pdf

Puppeteer

Recent Posts