Как конвертировать HTML в PDF
Создание PDF из HTML полезно для генерации счетов, отчётов, писем, сертификатов — любого документа, где вы хотите контролировать раскладку с CSS, но распространять в виде PDF.
Как конвертировать HTML в PDF
- Вставьте ваш HTML — введите ваш HTML-код, включая встроенный CSS или теги
<style>, в редактор. Код может включать полную структуру страницы с заголовками, таблицами, изображениями и стилями. - Просмотрите рендеринг — живой предпросмотр показывает точно, как ваш PDF будет рендериться по мере ввода. Настройте HTML и CSS, пока рендеринг не будет соответствовать вашим ожиданиям.
- Сгенерируйте и скачайте — нажмите кнопку генерации, чтобы создать PDF в вашем браузере, затем скачайте его мгновенно.
Что вы можете создать
- Счета и квитанции — структурированные таблицы с фирменной идентичностью, позициями товаров и итогами
- Отчёты — отформатированные документы с заголовками, абзацами, графиками и таблицами данных
- Сертификаты — стилизованные раскладки с пользовательскими шрифтами, рамками и центрированным текстом
- Письма — деловая переписка с шапкой, телом и областью подписи
- Резюме — аккуратные раскладки, экспортированные в чистый PDF для ваших заявок
Советы по стилю для PDF-вывода
Используйте встроенные стили или теги <style> — внешние таблицы стилей не загружаются. Поместите весь ваш CSS либо встроенно на элементах, либо в блок <style> в HTML.
Определите поля страницы — используйте @page { margin: 20mm; } в CSS, чтобы контролировать пространство вокруг вашего контента в PDF.
Используйте единицы, подходящие для печати — mm, cm и pt более предсказуемы в PDF, чем px или rem. Используйте mm для полей и интервалов, которые должны соответствовать физическим размерам.
Избегайте раскладок, зависящих от окна — процентные ширины и фиксированные пиксельные ширины работают лучше. Единицы, связанные с окном (vw, vh), могут не вести себя как ожидается в PDF.
Советы
- Сначала просмотрите — всегда проверяйте живой предпросмотр перед генерацией. Намного быстрее итерировать на HTML, чем регенерировать PDF каждый раз.
- Используйте base64 для изображений — конвертируйте изображения в base64 Data URI, чтобы гарантировать их включение в PDF. Внешние URL могут провалиться из-за CORS-ограничений.
- Будьте просты — сложные CSS-раскладки (вложенные сетки, перекрывающиеся позиционированные элементы) могут не рендериться идеально. Более простые раскладки дают более надёжные PDF.
- Тестируйте разрывы страниц — для многостраничных документов используйте
page-break-before: always, чтобы контролировать, где начинаются новые страницы.
Часто задаваемые вопросы
Сохраняет ли PDF мой CSS-стиль?
Да. Конвертер рендерит ваш HTML с применённым CSS, включая цвета, шрифты, поля и раскладку. PDF выглядит как отрендеренная веб-страница, а не как сырой исходный код.
Можно ли включить изображения в PDF?
Да. Используйте изображения base64 (Data URI) для самых надёжных результатов. Внешние URL изображений могут работать, если они доступны и совместимы с CORS.
Отправляется ли мой HTML на сервер?
Нет. Конвертация происходит полностью в вашем браузере. Ваш код и сгенерированный PDF никогда не покидают ваше устройство.
Какие CSS-функции поддерживаются?
Стандартный CSS, включая раскладки, цвета, шрифты, фоны, рамки и таблицы, хорошо поддерживается. Продвинутые функции, такие как CSS Grid, сложные анимации и некоторые крайние случаи Flexbox, могут быть ограничены.