Generating PDFs (invoices, manuals and more) from web pages using Puppeteer/Playwright

Originally published on theheadless.dev

Puppeteer and Playwright can be used to create PDFs from webpages. This opens up interesting automation scenarios for tasks such as archiving, generating invoices, writing manuals, books and more.

This article introduces this functionality and shows how we can customise the PDF to fit our needs.

Generating a PDF file

With Puppeteer:

With Playwright:

Note that we need to pass the path option to have the PDF file actually saved to disk.

WARNING:
This feature is currently only supported in Chromium headless in both Puppeteer and Playwright.

Tweaking the result

In certain cases, our webpage might look significantly different in our PDF compared to our browser. Depending on the case, it can pay off to experiment with the following:

  1. We might need to set option printBackground to true in case graphical components appear to be missing in the generated PDF.
  2. By default, page.pdf() will generate a PDF with adjusted colors for printing. Setting the CSS property -webkit-print-color-adjust: exact will force rendering of the original colors.
  3. Calling page.emulateMedia('screen') changes the CSS media type of the page.
  4. Setting either width and height or format to the appropriate value might be needed for the page to be displayed optimally.

Customising header and footer

With Puppeteer:

With Playwright:

We are including the following template files for our header…

…and footer:

The first page of the generated PDF looks as follows:

example generated pdf with template
example generated pdf with template

TIP:
Chromium sets a default padding for header and footer. You will need to
override it in your CSS.

Further considerations

See points 2 and 3 of the following section for practical examples of this approach.

Further reading

  1. Florian Mößle’s guide to generating invoices with Puppeteer
  2. A great example of Puppeteer’s PDF generation feature: Li Haoyi’s Hands On Scala book. See the build pipeline behind it.

Banner image: “Students working with a printing press, Working Men’s College” by State Library Victoria Collections is licensed under CC BY-NC 2.0

Head of Developer Relations @ Checkly, core theheadless.dev contributor.