В Playwright можно создавать PDF-файлы из веб-страниц. Это открывает интересные сценарии автоматизации таких задач, как архивирование, генерация счетов, написание гайдов, книг и т. д.
В статье мы познакомимся с этой функциональностью и узнаем, как настраивать создаваемый PDF.
Содержание:
- Создание PDF-файла
- Настройка результата
- Настройка верхнего и нижнего колонтитулов
- Дополнительные соображения
Создание файла
После загрузки страницы используем команду page.pdf(), чтобы преобразовать страницу в PDF.
const { chromium } = require('playwright')
;(async () => {
const browser = await chromium.launch()
const page = await browser.newPage()
await page.goto('https://checklyhq.com/learn/headless')
await page.pdf({ path: 'checkly.pdf' })
await browser.close()
})()
Обратите внимание, что нам нужно передать параметр path, чтобы PDF-файл сохранился на диске.
⚠️ В настоящее время эта функция поддерживается только в headless-Chromium в Playwright.
ПОДПИШИТЕСЬ НА НАШ ТЕЛЕГРАМ КАНАЛ Автоматизация тестирования
Настройка создания
Нужно быстро просмотреть официальную документацию по page.pdf() от Playwright, поскольку почти наверняка понадобится изменить вид созданной PDF-страницы.
В некоторых случаях веб-страница может выглядеть значительно иначе в PDF-файле, по сравнению с браузером. В зависимости от конкретного случая можно поэкспериментировать со следующими вариантами:
- Может понадобиться установить опцию
printBackgroundв true, если в сгенерированном PDF отсутствуют графические компоненты. - По умолчанию
функция page.pdf()генерирует PDF с откорректированными для печати цветами. Установка CSS-свойства-webkit-print-color-adjust: exactзаставит отображать оригинальные цвета. - Вызов
page.emulateMedia('screen')изменяет тип CSS медиа на странице. - Для оптимального отображения страницы может потребоваться установить соответствующие значения width и height или
format.
Настройка верхнего и нижнего колонтитулов
Мы также можем добавлять на страницы кастомные верхние и нижние колонтитулы, отображающие заголовок, номер страницы и другое. Посмотрим, как это выглядит на сайте:
const { chromium } = require('playwright')
const fs = require('fs')
;(async () => {
const browser = await chromium.launch()
const page = await browser.newPage()
const navigationPromise = page.waitForNavigation()
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 navigationPromise
await page.pdf({
path: 'checkly.pdf',
displayHeaderFooter: true,
headerTemplate: templateHeader,
footerTemplate: templateFooter,
margin: {
top: '100px',
bottom: '40px'
},
printBackground: true
})
await browser.close()
})()
Мы включаем следующие файлы шаблонов для верхнего и нижнего колонтитулов.
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>
Первая страница созданного PDF-файла выглядит следующим образом:
Выполните приведенные выше примеры следующим образом:
node generate-pdf.js
Дополнительные соображения
Мы можем удобно преобразовать веб-страницы в PDF, как это показано в примере выше. Еще более интересный вариант использования — создание совершенно нового документа, используя навыки работы с HTML и CSS, что зачастую избавляет от необходимости использовать LaTeX или аналогичные инструменты.
Перевод статьи «How to Generate PDFs with Playwright».