Конвертировать HTML в PDF

К чему странице разрешено обращаться и чем управляет CSS

У конвертации нет доступа к сети, и скрипты она не выполняет — и то и другое решения безопасности, а не недостающие функции. Конвертер, который загружал бы всё, что запросит присланная страница, можно было бы натравить на адреса, видимые только нашему серверу, а выполняющий скрипты запускал бы чужой код. Поэтому таблица стилей со ссылкой на CDN не придёт, изображение с обычным веб-адресом не загрузится, веб-шрифт будет молча заменён, а страница, которая рисует себя через JavaScript, конвертируется такой, какой её описывает разметка до запуска чего-либо. Решение всегда одно и то же: встройте CSS в блок style, а изображения — как data URI. Браузеры умеют это сами — «Сохранить страницу как → Веб-страница, полностью» в Firefox или «Сохранить как MHTML», — и сохранённая однофайловая страница конвертируется точно.

Результатом на самом деле управляет CSS для печати — это второе, что стоит знать. Страница верстается как для печати, поэтому блок @media print срабатывает, а обычная экранная таблица стилей может и не сработать, — вот почему страница с правилом печати, скрывающим навигацию, конвертируется прекрасно, а страница без него тащит за собой всё оформление сайта. @page управляет бумагой: размер, ориентация и поля читаются из него. break-before, break-after и break-inside: avoid решают, где делятся страницы, так что таблица, которую нельзя разрывать, или раздел, который должен начинаться с новой страницы, полностью в ваших руках.

Классическая потеря — фоны. Браузеры по умолчанию не печатают фоновые цвета и изображения, так что тёмная шапка может превратиться в белую, если в таблице стилей нет -webkit-print-color-adjust: exact, — одна строка, и в ней разница между фирменным документом и голым. Текст остаётся настоящим текстом, ссылки — рабочими ссылками, а заголовки могут стать закладками PDF, если в разметке использованы настоящие элементы заголовков.

Если наш сервер недоступен, страница сообщает об этом и собирает документ локально — при этом сохраняются текст, изображения и простая вёрстка, а всё, что требует настоящего прохода вёрстки, упрощается: в том числе grid, flexbox, float и позиционирование. Простой документ конвертируется почти один в один, свёрстанный дизайнером — нет.

Если нужно другое

Чтобы конвертировать живой URL — чего эта страница намеренно не умеет, — тот же движок отрисовки, что работает на нашем сервере, можно запустить у себя: chrome --headless --disable-gpu --print-to-pdf=out.pdf https://example.com загружает страницу с работающей сетью, со скриптами и всем прочим. В этом вся разница, и ради неё к нему и стоит обращаться.

Для настоящего контроля над колонтитулами, номерами страниц и полями WeasyPrint и Prince как следует реализуют спецификацию CSS Paged Media: колонтитулы из @top-center, счётчики страниц, сноски и перекрёстные ссылки, которые превращаются в номера страниц. WeasyPrint бесплатен, и его использует большинство конвейеров документации. Chrome почти ничего из этого не поддерживает, так что для сгенерированного отчёта с «Страница 3 из 12» в нижнем колонтитуле нужен один из них, а не этот инструмент.