Добавление верхних и нижних колонтитулов

Puppeteer — это инструмент для автоматизации браузера, который предоставляет API для управления браузером Chrome или Chromium с помощью JavaScript. Одной из часто встречающихся задач при автоматизации является работа с документами, например, создание PDF-файлов. В этом контексте добавление верхних и нижних колонтитулов в PDF-документы является важной функцией для добавления элементов управления и информации в печатные версии страниц. В данной статье рассматривается, как использовать Puppeteer для добавления верхних и нижних колонтитулов при создании PDF-документов.

Основы создания PDF с Puppeteer

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

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  await page.pdf({
    path: 'output.pdf',
    displayHeaderFooter: true, // Включаем колонтитулы
    headerTemplate: '<span class="title">Мой заголовок</span>', // Верхний колонтитул
    footerTemplate: '<span class="pageNumber"></span>/<span class="totalPages"></span>', // Нижний колонтитул
    margin: { top: '100px', bottom: '100px' }, // Устанавливаем отступы
  });

  await browser.close();
})();

Настройка верхнего колонтитула

Для задания верхнего колонтитула используется параметр headerTemplate. Он принимает HTML-код, который будет размещен в верхней части каждой страницы документа. Это может быть простой текст или сложный HTML с форматированием. 

headerTemplate: '<div style="font-size: 12px; text-align: center;">Мой заголовок</div>'

Вместо простого текста можно использовать элементы оформления, такие как изображения, таблицы, или стилизованный текст. Однако важно помнить, что содержимое верхнего колонтитула ограничено размером страницы. Если содержимое слишком велико, оно может не отобразиться должным образом.

Настройка нижнего колонтитула

Нижний колонтитул задается с помощью параметра footerTemplate. Он аналогичен headerTemplate, но размещается внизу страницы. Нижний колонтитул часто используется для отображения информации о текущей странице и общего числа страниц в документе. 

footerTemplate: `
  <div style="font-size: 10px; width: 100%; text-align: center;">
    <span class="pageNumber"></span> из <span class="totalPages"></span>
  </div>
`

Важной особенностью является использование специальных переменных для отображения номера текущей страницы (pageNumber) и общего числа страниц (totalPages). Эти переменные будут автоматически заменяться на соответствующие значения при генерации PDF-документа.

Использование стилей в колонтитулах

Можно добавлять стили CSS для оформления колонтитулов. Чтобы стили применялись корректно, их необходимо прописать внутри тега <style> в параметрах headerTemplate и footerTemplate. Также можно использовать встроенные стили для управления шрифтами, цветами и выравниванием. 

headerTemplate: `
  <style>
    .title { font-size: 14px; font-weight: bold; text-align: center; }
  </style>
  <div class="title">Заголовок страницы</div>
`

Такой подход позволяет гибко настраивать внешний вид колонтитулов, соблюдая требования к стилю документа.

Оформление колонтитулов с помощью шаблонов

Кроме базового текста, колонтитулы могут содержать динамические данные, такие как время создания документа, логотип компании или другие элементы. Например, можно добавить дату и время в верхний колонтитул: 

headerTemplate: `
  <style>
    .date { font-size: 10px; color: gray; }
  </style>
  <div style="text-align: right;">
    <span class="date">${new Date().toLocaleDateString()}</span>
  </div>
`

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

Технические особенности

  1. Размер шрифта и пространства: При добавлении колонтитулов важно учитывать, что стандартный размер страницы PDF может измениться, если добавлено много контента в колонтитулы. Для предотвращения таких проблем рекомендуется задавать отступы через margin и проверять размеры содержимого колонтитулов.

  2. Перенос строк: При использовании длинных строк в колонтитулах может возникнуть ситуация, когда текст не помещается на одну строку. Для управления этим можно использовать white-space: nowrap или другие CSS-свойства, чтобы контролировать перенос строк.

  3. Шаблоны и динамическое содержание: Puppeteer поддерживает использование динамически изменяющихся значений в колонтитулах. Это позволяет создавать документы, которые автоматически обновляются в зависимости от содержимого страницы.

Пример использования всех настроек 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  await page.pdf({
    path: 'output.pdf',
    displayHeaderFooter: true,
    headerTemplate: `
      <style>
        .header { font-size: 12px; text-align: center; font-weight: bold; }
      </style>
      <div class="header">Заголовок документа</div>
    `,
    footerTemplate: `
      <style>
        .footer { font-size: 10px; text-align: center; }
      </style>
      <div class="footer">
        Страница <span class="pageNumber"></span> из <span class="totalPages"></span>
      </div>
    `,
    margin: { top: '60px', bottom: '60px' },
  });

  await browser.close();
})();

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

Ограничения

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

Заключение

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

Оглавление