Puppeteer Header and Footer not displayed on first page

Question

I am using Puppeteer v1.6.0 and headers and footers are not displayed on the first page when creating a PDF with the displayHeaderFooter:true option, any idea how to enable this?

Answer 1

According to the Puppeteer Documentation:

page.pdf(options)

• options <Object> Options object which might have the following properties:
  • displayHeaderFooter <boolean> Display header and footer. Defaults to false.
  • headerTemplate <string> HTML template for the print header. Should be valid HTML markup with following classes used to inject printing values into them:
    • date formatted print date
    • title document title
    • url document location
    • pageNumber current page number
    • totalPages total pages in the document
  • footerTemplate <string> HTML template for the print footer. Should use the same format as the headerTemplate.
  • margin <Object> Paper margins, defaults to none.
    • top <string> Top margin, accepts values labeled with units.
    • right <string> Right margin, accepts values labeled with units.
    • bottom <string> Bottom margin, accepts values labeled with units.
    • left <string> Left margin, accepts values labeled with units.
• returns: <Promise<Buffer>> Promise which resolves with PDF buffer.

NOTE Generating a pdf is currently only supported in Chrome headless.

---

NOTE headerTemplate and footerTemplate markup have the following limitations:

1. Script tags inside templates are not evaluated.
2. Page styles are not visible inside templates.

---

Therefore, make sure that you are using the displayHeaderFooter, headerTemplate, and footerTemplate options appropriately to allow for proper PDF generation.

Also, make sure that you set the font size of the header and footer via CSS (you may need to use inline CSS), and set the margin option of the web page to ensure that the content of the web page does not cover up the header and footer.

Example:

await page.pdf({
  path: 'example.pdf',
  displayHeaderFooter: true,
  headerTemplate: '<div id="header-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="date"></span><span class="title"></span><span class="url"></span><span class="pageNumber"></span><span class="totalPages"></span></div>',
  footerTemplate: '<div id="footer-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="date"></span><span class="title"></span><span class="url"></span><span class="pageNumber"></span><span class="totalPages"></span></div>',
  margin: {
    top: '100px',
    bottom: '200px',
    right: '30px',
    left: '30px',
  },
});

Answer 2

thanks a lot! the problem was that i didn't only have to set the margin in puppeteer but also in the actual page!still does not make a lot of sense to me why it headers/footers were displayed on all of the pages but on the first, but anyway, this was the solution...

Answer 3

I used jsreport for render pdf in nodejs. I have a problem with headerTemplate and footerTemplate don't render when I generate my pdf. There is a lot of code sample to use

'margin': {
   top    : '100px',
   bottom : '200px',
   right  : '30px',
   left   : '30px'
}

but it doesn't work for me. I keep searching for two days until i go to see the unitesting for chrome-pdf. here the link https://github.com/jsreport/jsreport-chrome-pdf/blob/master/test/chromeTest.js.

It saw the code as below and it works for me. I need to use marginTop and marginBottom instead of margin object.

const resp = await jsreport.render({
      template: {
        content: '{#asset src/storages/htmls/pdf/master-card.html}',
        engine: 'handlebars',
        recipe: 'chrome-pdf',
        pdfPassword: {
          active: true,
          password: '1234'
        },
        chrome: {
          displayHeaderFooter: true,
          headerTemplate:'',
footerTemplate:`<h1>Page <span class="pageNumber"></span> of <span class="totalPages"></span></h1>`,
          format : 'A4',
          marginTop: '80px',
          marginBottom:'80px'
        },
        //javascript helper functions used by templating engines
            helpers: helper
      },