Generating a PDF file
After loading a page, we use the page.pdf() command to convert it to a
PDF.
pdf-minimal.spec.ts
import { test } from '@playwright/test'
test('generate pdf', async ({ page }) => {
await page.goto('https://checklyhq.com/learn/playwright')
await page.pdf({ path: 'checkly.pdf' })
})
Note that we need to pass the path option to have the PDF file actually
saved to disk.
⚠️This feature is currently only supported in Chromium headless in
Playwright.
Tweaking the result
It is important to take a quick look at the official docs for page.pdf() from
Playwright, as it is almost certain that we will want to tweak the
appearance of our page in the resulting PDF.
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
We can also have custom headers and footers added to our pages,
displaying values such as title, page number and more. Let’s see how this
looks on your favourite website:
pdf-hd.spec.ts
import { test } from '@playwright/test'
import * as fs from 'fs'
test('generate pdf with header and footer', async ({ page, browser }) =>
{
const templateHeader = fs.readFileSync('template-header.html', 'utf-8')
const templateFooter = fs.readFileSync('template-footer.html', 'utf-8')
await page.goto('https://checklyhq.com/learn/headless')
await page.pdf({
path: 'checkly.pdf',
displayHeaderFooter: true,
headerTemplate: templateHeader,
footerTemplate: templateFooter,
margin: {
top: '100px',
bottom: '40px'
},
printBackground: true
})
})
We are including the following template files for our header and footer.
template-header.html
<html>
<head>
<style type="text/css">
#header {
padding: 0;
.content {
width: 100%;
background-color: #777;
color: white;
padding: 5px;
-webkit-print-color-adjust: exact;
vertical-align: middle;
font-size: 15px;
margin-top: 0;
display: inline-block;
.title {
font-weight: bold;
.date {
text-align:right;
</style>
</head>
<body>
<div class="content">
<span class="title"></span> -
<span class="date"></span>
<span class="url"></div>
</div>
</body>
</html>
template-footer.html
The first page of the generated PDF looks as follows:
Run the above examples as follows:
Terminal
npx playwright test generate-pdf.ts
Further considerations
We can easily transform existing web pages into PDF format, just as we
have shown in our example. An even more interesting use case is about
generating a brand new document: now we can use our existing HTML and
CSS skills to produce high-quality PDFs, often eliminating the need for
LaTeX or similar tools.
Emulating mobile devices Multiple tabs
Last updated on June 16, 2025. You can contribute to this documentation
by editing this page on Github
