Конвертация HTML в PDF: обработка стилей CSS и макет страницы

Зачем конвертировать HTML в PDF

Содержимое веб-страниц, которое нужно распечатать, архивировать, share офлайн — удобнее всего конвертировать в PDF. Конвертация HTML в PDF превращает динамическую веб-страницу в фиксированный документ.

Частые случаи:

• Сохранение веб-статей
• Генерация онлайн-счетов/квитанций
• Экспорт отчётов
• Создание электронных книг

Методы конвертации HTML в PDF

Печать из браузера

Самый простой способ: в браузере Ctrl+P, в качестве назначения выберите «Сохранить как PDF». Движок рендеринга браузера напрямую конвертирует страницу в PDF.

Преимущества: бесплатно, хорошая поддержка CSS. Недостатки: ручная операция, не подходит для пакетов; интерактивные элементы страницы могут мешать.

Онлайн-инструмент

Используйте инструмент HTML в PDF:

1. Введите URL страницы или вставьте HTML
2. Инструмент рендерит и конвертирует
3. Скачайте PDF

Обработка в браузере, содержимое не отправляется.

Библиотеки программирования

Для сценариев разработки используйте библиотеки:

• JavaScript: Puppeteer (Chrome headless), jsPDF
• Python: pdfkit, WeasyPrint
• Сервер: wkhtmltopdf

Обработка стилей CSS

Уровень поддержки CSS

Разные движки конвертации имеют разную поддержку CSS:

• Движок браузера (Chrome): самая полная поддержка, flex и grid работают
• wkhtmltopdf: на базе старого WebKit, не поддерживает новый CSS
• WeasyPrint: поддерживает большую часть CSS 2.1, часть CSS 3

Перед конвертацией в PDF уточните поддерживаемые движком возможности CSS.

CSS только для печати

Используйте @media print для написания стилей только для печати:

@media print {
  .no-print { display: none; }  /* Скрыть элементы, не предназначенные для печати */
  body { font-size: 12pt; }     /* Для печати использовать pt, а не px */
  a { text-decoration: none; }  /* Убрать подчёркивание ссылок */
}

Скрытие интерактивных элементов

Навигация, кнопки и реклама на странице не имеют смысла в PDF. Используйте @media print для скрытия:

@media print {
  nav, footer, .ad, .sidebar { display: none; }
}

Обработка цветов

• Экран использует RGB, печать PDF использует CMYK
• Цвет фона по умолчанию не печатается, для принудительной печати задайте -webkit-print-color-adjust: exact
• Тёмный фон расходует много чернил в PDF, рассмотрите переход на светлые цвета

Управление разрывами страниц

Разрыв страницы

CSS управляет разбивкой:

h1 { page-break-before: always; }  /* Разрыв страницы перед заголовком */
table { page-break-inside: avoid; } /* Таблицу не разрывать */
img { page-break-inside: avoid; }   /* Изображение не разрывать */

Свойства разрывов

• page-break-before: разрыв страницы перед элементом
• page-break-after: разрыв страницы после элемента
• page-break-inside: не разрывать внутри элемента

Предотвращение висячих строк

p { orphans: 3; widows: 3; }  /* Минимум 3 строки в конце/начале абзаца */

Колонтитулы

Печать из браузера

В диалоговом окне печати браузера задайте колонтитулы (номер страницы, заголовок, URL). Но стили ограничены.

Генерация библиотекой

Библиотеки вроде Puppeteer могут настраивать колонтитулы:

const pdf = await page.pdf({
  displayHeaderFooter: true,
  headerTemplate: '<div style="font-size:9pt;">Заголовок отчёта</div>',
  footerTemplate: '<div>Страница <span class="pageNumber"></span></div>',
  margin: { top: '60px', bottom: '60px' }
});

Обработка изображений

Путь к изображениям

В HTML изображения используют абсолютный путь или base64:

• Абсолютный путь: <img src="https://example.com/img.png">
• base64: <img src="data:image/png;base64,...">
• Относительный путь: может не найтись при конвертации в PDF, используйте абсолютный путь или base64

Встраивание base64

Небольшие изображения используйте в base64, избегая проблем с путями:

<img src="data:image/png;base64,iVBORw0KGgo...">

Большие изображения в base64 увеличивают размер HTML, используйте обдуманно.

Чёткость изображений

• Используйте изображения в высоком разрешении
• Не увеличивайте сверх оригинального размера
• Векторные изображения (SVG) наиболее чёткие в PDF

Обработка шрифтов

Загрузка шрифтов

Веб-страницы используют Web Font (Google Fonts и т. д.), при конвертации в PDF шрифты должны быть полностью загружены. При использовании библиотек убедитесь, что шрифты загружены перед конвертацией.

Встраивание шрифтов

PDF должен встраивать шрифты для единообразного отображения на любом устройстве. Инструменты конвертации обычно встраивают автоматически.

Стандартные шрифты

Используйте стандартные шрифты (Arial, Times New Roman и т. д.) во избежание проблем со шрифтами.

Конвертация через DocsAll

Инструмент HTML в PDF:

1. Введите URL страницы или вставьте HTML-код
2. Инструмент рендерит веб-страницу
3. Конвертирует в PDF
4. Скачайте

Обработка в браузере, содержимое не отправляется на сервер.

Частые вопросы

Стили потеряны

• CSS не загружен (неверный путь к внешнему CSS)
• Использована неподдерживаемая движком возможность CSS
• Решение: используйте inline CSS, используйте поддерживаемые возможности CSS

Разрыв страницы разрезает содержимое

• Не настроено управление разрывами
• Решение: добавьте page-break-inside: avoid

Изображения не отображаются

• Неверный путь
• Ограничение same-origin
• Решение: используйте абсолютный путь или base64

Искажение символов

• Шрифт не поддерживает символы
• Кодировка не UTF-8
• Решение: используйте шрифт с поддержкой, объявите кодировку UTF-8 в HTML

Цвет фона не напечатан

• Браузер по умолчанию не печатает фон
• Решение: CSS задайте -webkit-print-color-adjust: exact, или отметьте «фоновая графика» в диалоге печати

Страница слишком широкая

• Ширина веб-страницы превышает страницу PDF
• Решение: настройте ширину в CSS или переключитесь на альбомную бумагу

Итог

Конвертация HTML в PDF опирается на обработку стилей CSS и управление разрывами страниц. Используйте @media print для стилей печати, скрывайте интерактивные элементы. Управляйте разрывами через свойства page-break. Для изображений используйте абсолютный путь или base64. Инструмент HTML в PDF DocsAll работает в браузере, содержимое не покидает устройство.