Без завантаження, 100% локально, без облікового запису

HTML у PDF

Вставте HTML, виберіть розмір сторінки та завантажте PDF, усе рендериться у браузері.

Як працює HTML у PDF

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

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

Автор: Bastien Sulyan

HTML у PDF: покрокова інструкція

  1. Вставте HTML-розмітку до області редактора.
  2. За бажанням відрегулюйте розмір сторінки (A4 або Letter) та орієнтацію.
  3. Натисніть «Конвертувати»; DOMPurify очищає HTML, а html2canvas рендерить його.
  4. Зачекайте, поки jsPDF закодує вивід canvas як сторінки PDF.
  5. Завантажте 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-інструменти