headerHtml() or footerHtml() have no effect

[hirasso]

Hi there! I'm trying the example from the docs to display page numbers:

Browsershot::html('foobar')
  ->showBrowserHeaderAndFooter()
  ->hideFooter()
  ->headerHtml('<span class="pageNumber"></span>')
  ->initialPageNumber(8)
  ->save('example.pdf');

This is what I get:

example.pdf

If I understand the docs correctly, there should be a page number (1) printed on the top of the PDF?

[willherzog]

I'm having the same issue. I've also tried adding the total pages (i.e. <span class="totalPages"></span>) and adding both to the footer instead of the header. Neither of them ever show up. Only the default browser header/footer contents seem to work (and we don't want those since they include the URL).

[hirasso]

@willherzog sorry, forgot to get back here to report my findings. I found out what the issue was by searching for related issues in browsershot's underlying technology puppeteer. Turns out the header and footer are being treated as completely different HTML documents, weirdly with a default font size of 0 😆.

You need to inject your own styles into the template, that will make the HTML appear:

Browsershot::html('foobar')
  ->showBrowserHeaderAndFooter()
  ->hideHeader()
  ->footerHtml(getFooterHtml())
  ->initialPageNumber(0)
  ->save('example.pdf');

/**
 * Get the Footer HTML for browsershot.
 * Injects styles to fix the bug with a font size of zero
 * @see https://github.com/puppeteer/puppeteer/issues/1853
 */
function getFooterHtml()
{
  ob_start() ?>
  <style>
    .pageFooter {
      -webkit-print-color-adjust: exact;
      font-family: system-ui;
      font-size: 6pt;
      text-align: center;
      width: 100%;
      display: block;
    }
  </style>
  <div class="pageFooter">
    <span class="pageNumber"></span> of <span class="totalPages"></span>
  </div>
<?php return ob_get_clean();
}

After I got this fixed, I realized I also wanted to use a custom web font for the footer. I tried the snippets provided in the above issue but to no avail. Puppeteer just continued to crash 💥

That's why in the end, I opted for using Paged.js for header/footer support. It's a wonderful tool that even allows you to preview your print output in the browser, complete with headers & footers that support custom web fonts! 🤩 That, combined with browsershot is my new silver bullet when it comes to generating PDFs from websites.

Hope this helps others and my future self :)

[hirasso]

I'll close this as it's an issue with puppeteer, not browsershot. Although I guess documenting this issue would save a few people some time :)