Генерация PDF из страницы

Puppeteer — это мощный инструмент для автоматизации браузера Google Chrome, который позволяет разработчикам и тестировщикам выполнять различные операции с веб-страницами, включая захват скриншотов, взаимодействие с элементами и создание PDF. Создание PDF-файлов из веб-страниц является одной из самых распространённых задач, которые решаются с помощью Puppeteer.

Основы работы с Puppeteer

Puppeteer работает через интерфейс API для браузера Chromium и может использоваться для генерации PDF-файлов из любой страницы, которую он может загрузить. Это особенно полезно для тестирования отображения документа, создания отчетов, а также для сохранения в форматах, удобных для печати.

Для начала работы с Puppeteer необходимо установить его через менеджер пакетов npm: 

npm install puppeteer

После этого можно создать основной скрипт для генерации PDF.

Основной код для генерации PDF

Для того чтобы создать PDF-файл из страницы, нужно сначала запустить браузер, затем загрузить страницу и вызвать функцию page.pdf(). Пример простого скрипта: 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch(); // Запуск браузера
  const page = await browser.newPage(); // Открытие новой вкладки

  // Загрузка страницы
  await page.goto('https://example.com', { waitUntil: 'networkidle2' });

  // Генерация PDF
  await page.pdf({ path: 'example.pdf', format: 'A4' });

  await browser.close(); // Закрытие браузера
})();

Этот код выполняет следующие шаги:

  1. Запускает браузер.
  2. Открывает новую вкладку.
  3. Загружает страницу по указанному URL.
  4. Создаёт PDF-файл, сохраняющийся в указанный путь (example.pdf).
  5. Закрывает браузер.

Параметры функции page.pdf()

Метод page.pdf() позволяет настроить различные параметры, чтобы адаптировать PDF к конкретным нуждам. Вот основные из них:

  • path: Путь для сохранения PDF-файла.
  • format: Размер бумаги, по умолчанию A4. Возможные значения: letter, A4, A3, legal и другие.
  • landscape: Если true, создаёт PDF в альбомной ориентации.
  • printBackground: Если true, сохраняет фоновые изображения и цвета страницы.
  • margin: Параметры отступов, например, { top: ‘10px’, right: ‘10px’, bottom: ‘10px’, left: ‘10px’ }.
  • width и height: Можно задать конкретные размеры страницы в пикселях, если требуется нестандартный формат.
  • scale: Масштабирование страницы (по умолчанию 1). Полезно для создания PDF с уменьшенным или увеличенным контентом.

Пример с дополнительными параметрами: 

await page.pdf({
  path: 'example.pdf',
  format: 'A4',
  landscape: true,
  printBackground: true,
  margin: { top: '20mm', right: '20mm', bottom: '20mm', left: '20mm' }
});

Этот код сгенерирует PDF-файл в альбомной ориентации с фоновыми изображениями и отступами по 20 мм.

Генерация PDF для специфичных элементов

В случае, когда нужно сохранить в PDF не всю страницу, а только определённый её элемент, можно использовать метод page.$()</code> для выбора элемента и его рендеринга в PDF. Пример:</p> <pre class="javascript"><code>const element = await page.$('.content'); // Выбор элемента по классу await element.screenshot({ path: 'element.png' }); // Сделать скриншот элемента

Хотя генерация PDF для конкретных элементов напрямую не поддерживается, можно создать PDF из элемента, вырезав нужную часть страницы. Для этого нужно настроить размеры страницы и отступы таким образом, чтобы в документ попал только необходимый фрагмент.

Пример генерации PDF с учётом скроллинга страницы

В случае, если страница слишком длинная или содержит динамические элементы, которые могут загрузиться только при прокрутке, важно дождаться полной загрузки контента перед созданием PDF. Для этого можно использовать метод waitForSelector() или прокрутку страницы с помощью page.evaluate().

Пример скрипта с прокруткой страницы: 

await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.evaluate(() => {
  window.scrollBy(0, window.innerHeight); // Прокрутка страницы вниз
});
await page.pdf({ path: 'scrolled_example.pdf', format: 'A4' });

Это гарантирует, что страница будет прокручена до конца, и весь контент будет захвачен в PDF.

Создание PDF с динамическими данными

Puppeteer также можно использовать для генерации PDF на основе динамически загружаемых данных. Например, если на странице есть формы, которые необходимо заполнить перед сохранением в PDF, Puppeteer позволяет заполнять поля формы и создавать PDF после того, как форма будет отправлена.

Пример с динамическими данными: 

await page.goto('https://example.com/form');
await page.type('#name', 'John Doe'); // Вводим данные в форму
await page.click('#submit'); // Отправляем форму
await page.waitForNavigation({ waitUntil: 'networkidle2' }); // Ожидаем загрузки результата
await page.pdf({ path: 'form_submission.pdf' });

Этот код автоматически заполняет форму, отправляет её и сохраняет результат в PDF-файл.

Рекомендации по оптимизации

  • Асинхронность: Использование async/await делает взаимодействие с браузером Puppeteer плавным и не блокирующим. Это критически важно для правильного выполнения задач, таких как генерация PDF из динамических страниц.

  • Ожидания: Прежде чем генерировать PDF, стоит убедиться, что все ресурсы страницы (изображения, скрипты и стили) загружены. Использование waitUntil: ‘networkidle2’ в методе page.goto() помогает удостовериться, что страница готова.

  • Минимизация ресурсов: Чтобы ускорить процесс, можно отключить изображения и другие ресурсы, которые не требуются для отображения страницы в PDF. Это можно сделать с помощью page.setRequestInterception(true) и блокировки ненужных ресурсов.

Пример блокировки изображений: 

await page.setRequestInterception(true);
page.on('request', (request) => {
  if (request.resourceType() === 'image') {
    request.abort(); // Блокируем загрузку изображений
  } else {
    request.continue();
  }
});

Отладка и логирование

Для сложных страниц с динамическим контентом и множеством элементов полезно логировать процесс и отлаживать этапы генерации PDF. Puppeteer предоставляет подробные сообщения об ошибках, которые могут помочь в выявлении проблем.

Использование методов console.log() или логгирование ошибок позволяет контролировать каждый шаг, особенно когда возникает необходимость выполнить сложные манипуляции с данными перед созданием PDF.

Puppeteer предоставляет гибкость и возможности для создания PDF-файлов из страниц в различных сценариях, включая динамическое взаимодействие с контентом и кастомизацию параметров вывода. Возможности этого инструмента становятся особенно ценными при автоматизации тестирования или при создании отчётов на лету.

Оглавление