HTML в PDF: сложнее, чем должно быть
Конвертация веб-страниц в PDF кажется простой. Вот почему это не так, и как получить хорошие результаты.
У тебя есть хорошая веб-страница. Тебе нужна она в виде PDF. Control+P, сохранить как PDF. Готово?
Иногда. Но часто результат имеет сломанные макеты, отсутствующие изображения, странные разрывы страниц и заголовки, обрезанные на полуслове.
HTML и PDF фундаментально различны. Заставить их работать вместе требует усилий.
Почему это сложно
HTML текучий. Контент течёт, чтобы заполнить доступное пространство. Адаптивный. Гибкий.
PDF фиксированный. Конкретные размеры страниц. Точное позиционирование. Ничто не течёт.
Конвертация означает взять что-то, созданное для адаптации, и заставить это поместиться на жёсткие страницы.
Разрывы страниц — враг
Твой красивый абзац оказывается разделённым на две страницы. Заголовок таблицы на странице 3, данные начинаются на странице 4.
В CSS есть свойства page-break-before, page-break-after и page-break-inside. Они должны контролировать это.
h2 {
page-break-after: avoid;
}
table {
page-break-inside: avoid;
}
"Должны", потому что поддержка браузеров варьируется. Тестируй тщательно.
Что рендерится, а что нет
Веб-шрифты: Иногда работают, иногда нет. Тестируй с реальными шрифтами, а не запасными.
Цвета фона: Часто исключаются по умолчанию (экономит чернила). Проверь настройки "печать фонов".
Изображения: Внешние изображения могут не загрузиться. Проблемы CORS появляются во время конвертации.
Контент, рендеренный JavaScript: Если контент загружается через JS, его может не быть, когда PDF захватывает страницу.
Анимации и переходы: Исчезли. PDF статичен.
Печатные стили
В CSS есть медиа-тип для печати:
@media print {
.no-print {
display: none;
}
body {
font-size: 12pt;
}
a::after {
content: " (" attr(href) ")";
}
}
Скрой навигацию, настрой шрифты, покажи URL для ссылок. Проектируй специально для печатного вывода.
Различные методы конвертации
Печать браузера в PDF: Хорошо для разовых конвертаций. Результаты различаются в зависимости от браузера.
Headless браузеры (Puppeteer, Playwright): Программный контроль. Консистентные результаты. Требует настройки.
PDF библиотеки (wkhtmltopdf, WeasyPrint): Специализированные инструменты. Лучший контроль над выводом.
Онлайн-сервисы: Загрузи HTML, получи PDF. Удобно для случайного использования.
У каждого есть компромиссы в качестве, скорости и контроле.
Советы для лучших результатов
Используй фиксированную ширину. Адаптивные макеты вызывают непредсказуемые результаты. Установи конкретную ширину для вывода PDF.
Упрощай макеты. Сложные CSS grid и flexbox могут ломаться. Более простые макеты конвертируются надёжнее.
Встраивай шрифты. Не полагайся на доступность системных шрифтов.
Тестируй рано. Не строй всю страницу, а затем пробуй конвертацию в PDF. Тестируй по мере создания.
Устанавливай явный размер страницы. PDF думает страницами. Скажи ему, какой размер.
@page {
size: A4;
margin: 1cm;
}
Когда использовать нативный PDF
Если тебе нужен точный контроль — контракты, счета, отчёты с точным форматированием — рассмотри генерацию PDF напрямую вместо конвертации HTML.
Библиотеки типа PDFKit, ReportLab или iText создают PDF без слоя конвертации HTML.
Больше работы, больше контроля, более предсказуемые результаты.
Конвертация HTML в PDF работает, но требует внимания к печатным стилям, разрывам страниц и различиям между веб и печатными медиа. Тестируй тщательно и устанавливай ожидания соответственно.