How to Generate PDFs with Playwright

In this example we will explore how to generate PDFs with playwright with simple example. To generate PDFs using Playwright, you can use the page.pdf() method, which allows you to create a PDF file from a webpage. Below is a step-by-step guide and example code for generating PDFs in Playwright using JavaScript.

Playwright’s page.pdf() method currently works only with Chromium-based browsers (e.g., Chrome or Edge). Ensure you use the Chromium browser in your script.

import { test } from '@playwright/test'

test('generate pdf', async ({ page }) => {
  await page.goto('https://www.google.com')
  await page.pdf({ path: 'google.pdf' })
})

// Generate PDF
  await page.pdf({
    path: 'output.pdf', // Output file path
    format: 'A4', // Paper format (A4, Letter, etc.)
    margin: {
      top: '20px',
      right: '20px',
      bottom: '20px',
      left: '20px',
    },
    printBackground: true, // Include background graphics
  });

Here is a simple example of generating a PDF from a webpage using Playwright:

const { chromium } = require('playwright');

(async () => {
  // Launch the browser
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Navigate to a webpage
  await page.goto('https://example.com');

  // Generate PDF
  await page.pdf({
    path: 'output.pdf', // Output file path
    format: 'A4', // Paper format (A4, Letter, etc.)
    margin: {
      top: '20px',
      right: '20px',
      bottom: '20px',
      left: '20px',
    },
    printBackground: true, // Include background graphics
  });

  // Close the browser
  await browser.close();
})();

Also we can customize the header and footer with html and use in page.pdf() function.

pdf.spec.js

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://www.google.com')

  await page.pdf({
    path: 'google.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

<html>
  <head>
    <style type="text/css">
      #footer {
        padding: 0;
      }
      .content-footer {
        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;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="content-footer">
      Page <span class="pageNumber"></span> of <span class="totalPages"></span>
    </div>
  </body>
</html>