HTML в PDF

Вставьте HTML, выберите размер страницы и скачайте PDF, всё отрисовывается в браузере.

Как работает HTML в PDF

HTML в PDF принимает HTML-разметку, вставленную в редактор, очищает её с помощью DOMPurify для удаления скриптов и небезопасных атрибутов, рендерит на скрытом canvas с помощью html2canvas и кодирует результат в PDF с помощью jsPDF. Весь конвейер работает внутри вкладки браузера; ни HTML-код, ни результат рендеринга не передаются на какой-либо сервер. Это делает инструмент подходящим для конвертации HTML-фрагментов, содержащих личные данные, которые не хочется вставлять в онлайн-сервис.

Прежде чем использовать этот инструмент, важно понять формат вывода. Страницы PDF являются растровыми изображениями, а не векторным текстом. Текст в выводе нельзя выделить, найти поиском или переформатировать. Внешние ресурсы, такие как изображения, на которые ссылаются по URL, блокируются политикой CORS браузера и не загрузятся. Встроенные стили и CSS работают, но сложные макеты с нестандартными веб-шрифтами или продвинутым CSS grid могут отображаться некорректно. Для документально-точной конвертации полных веб-страниц более подходящим инструментом является безголовый браузер на стороне сервера.

Автор: Bastien Sulyan

HTML в PDF: пошаговая инструкция

Вставьте HTML-разметку в область редактора.
При необходимости настройте размер страницы (A4 или Letter) и ориентацию.
Нажмите «Конвертировать»; DOMPurify очистит HTML, а html2canvas отрендерит его.
Дождитесь, пока jsPDF закодирует вывод canvas как страницы PDF.
Скачайте PDF.

Частые сценарии использования

Вы сгенерировали HTML-счёт в браузере из локального шаблона и хотите PDF-копию без отправки его в сервис конвертации.
Простой HTML-отчёт, построенный из данных API, нужно сохранить как PDF для архивирования; вставьте HTML и конвертируйте локально.
Вы создали стилизованный HTML-шаблон письма и хотите посмотреть, как он будет выглядеть напечатанным в PDF.
Разработчику нужен быстрый PDF из HTML-фрагмента во время тестирования без настройки серверного безголового браузера.

Часто задаваемые вопросы

Почему текст в выходном PDF нельзя выделить?

Конвейер конвертации рендерит HTML в растровое изображение canvas с помощью html2canvas, затем кодирует это растровое изображение как данные изображения внутри страниц PDF с помощью jsPDF. Вывод является растеризованным изображением, а не текстовым слоем. Если нужен PDF с выделяемым текстом, потребуется серверный безголовый браузер, такой как Puppeteer, - именно его этот инструмент намеренно избегает для локальной обработки.

Почему изображения из HTML не отображаются в PDF?

Изображения, загружаемые с внешних URL, подчиняются политике CORS браузера. Если сервер изображений не отправляет разрешающие CORS-заголовки, html2canvas не может прочитать пиксельные данные, и слот изображения остаётся пустым. Изображения в формате base64, встроенные прямо в HTML, или изображения с того же происхождения работают без этого ограничения.

HTML, который я вставляю, отправляется на сервер?

Нет. HTML остаётся в памяти браузера на протяжении всего процесса. DOMPurify очищает его на стороне клиента, html2canvas рендерит его на стороне клиента, а jsPDF кодирует PDF на стороне клиента. Ничего не покидает вкладку браузера.

Что DOMPurify удаляет при очистке?

DOMPurify удаляет теги script, атрибуты обработчиков событий, такие как onclick и onload, URL вида javascript:, и другие конструкции, способные выполнять код. Структурная и стилевая разметка сохраняется, поэтому отрендеренный результат выглядит так же, но безопасен для вставки в контекст документа.

Можно ли конвертировать полный URL веб-страницы вместо вставки HTML?

Нет. Инструмент работает с HTML-разметкой, вставляемой напрямую. Загрузка URL потребовала бы получения страницы, что наталкивается на ограничения CORS для большинства сайтов и предполагает сетевой запрос, выводящий операцию за рамки локальной обработки.

Руководства и статьи об этом инструменте

Набор PDF-инструментов в браузере: очистка, разметка и структура