Что такое HTML в PDF?

Конвертирует HTML-разметку в PDF для скачивания. Поддерживает CSS-стили, изображения, таблицы и произвольные форматы страниц. Подходит для счетов, отчётов и сохранения форматированных веб-страниц.

Можно выбрать формат A4, A3, Letter или Legal, переключаться между книжной и альбомной ориентацией и задавать поля от 0 до 20 мм. При необходимости защитите файл паролем или добавьте номера страниц в колонтитул. Встроенный CSS, картинки в base64 и таблицы выводятся как есть. Конвертация идёт через html2pdf.js на основе html2canvas, поэтому страницы с веб-шрифтами или сложными эффектами могут немного отличаться от предпросмотра.

Как использовать

1. Шаг 1 — Вставьте или введите HTML-контент в редактор. Живой предпросмотр покажет точный вид будущего PDF.
2. Шаг 2 — Настройте параметры страницы: выберите формат бумаги (A4, A3, Letter, Legal), ориентацию (портретная/альбомная) и поля. При желании задайте пароль или добавьте номера страниц.
3. Шаг 3 — Нажмите «Создать PDF», чтобы сформировать документ, и скачайте его на устройство.

Когда использовать

• Сделать PDF из HTML-шаблона счёта или чека перед отправкой клиенту.
• Сохранить отчёт с графиками и таблицами как переносимую архивную копию.
• Подготовить распечатки для воркшопа или урока из веб-контента.

Результат

Фрилансер вставляет HTML счёта с логотипом компании, детализированной таблицей и итогами. Он выбирает A4 портретную ориентацию с полями 20 мм и скачивает профессиональный PDF для отправки клиенту.

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

Почему PDF выглядит иначе, чем живой предпросмотр?

PDF растеризуется через html2canvas: страница сначала отрисовывается в изображение, а потом оборачивается в PDF. Если веб-шрифты не успели загрузиться, есть position: fixed элементы или CSS-фильтры, результат может слегка отличаться от предпросмотра.

Можно ли вставлять картинки с другого домена?

Только если этот сервер отдаёт разрешающие CORS-заголовки. Иначе html2canvas не сможет прочитать пиксели, и в PDF получится пустое место. Решения: скачать картинку и вшить как base64, либо разместить на одном источнике с приложением.

Как управлять разрывами страниц?

Добавьте CSS-правило page-break-before: always (или page-break-after) на элемент, с которого должна начинаться новая страница. Для таблиц page-break-inside: avoid на строке не даст ей разорваться.

Можно ли выделять текст в PDF?

В основном нет. Рендер уплощает страницу через canvas, и текст становится растровым изображением. Некоторые подходы накладывают невидимый слой текста для выделения, но этот инструмент выдаёт растеризованные PDF — читать удобно, копировать не всегда возможно.

Есть ли ограничение на размер HTML?

На практике несколько сотен килобайт разметки или 10-15 страниц. Длиннее — велик риск нехватки памяти, ведь весь DOM сначала растеризуется в один большой canvas, а уже потом режется на страницы.

Похожие инструменты