Конвертировать HTML в PDF — Сохранить веб-страницу онлайн

Сохранить статью для чтения офлайн, приложить готовую вёрстку письма к отчёту, сделать PDF-версию своей веб-страницы или квитанции из HTML-кода — задача частая. Инструмент «HTML → PDF» в pdfredX делает это прямо в браузере и даёт выбрать, как именно: приватно (локально) или с лучшей вёрсткой (через сервер). Разберём оба пути.

Шаг 01. Открыть инструмент

Откройте pdfredx.com и запустите «HTML → PDF». Появится окно с двумя вкладками: HTML-код (вставить готовую разметку) и URL страницы (адрес сайта). Выберите то, что у вас есть.

Шаг 02. Выбрать способ конвертации

Под полем ввода — переключатель метода:

• 🔒 Локально (приватно). Конвертация идёт прямо в вашем браузере, файл никуда не уходит. Лучший выбор для вставленного HTML-кода, у которого стили и картинки внутри (inline-CSS, data-изображения).
• 🌐 Сервер (лучше вёрстка). Разметку или страницу по URL рендерит наш сервер. Держит вёрстку и внешние ресурсы лучше, но это базовый рендер без JavaScript — хорош для документов и простых страниц, слаб на сложных динамических сайтах. Обрабатывается на нашем сервере (не 100% локально).
• Для вкладки URL «локальный» способ — это 🖨 Открыть + Ctrl+P: мы откроем страницу в новой вкладке, а вы нажмёте Ctrl+P → «Сохранить как PDF». Это даёт лучшее качество (движок вашего браузера) и остаётся 100% локальным.

Шаг 03. Получить PDF

Нажмите «Конвертировать в PDF» — готовый файл скачается напрямую из браузера. Так из HTML-кода получается аккуратный документ, а из адреса — PDF-версия сайта или веб-страница как офлайн-документ. Бесплатно, без регистрации.

Как это работает технически

Локальный путь. Вставленный HTML рендерится в скрытом контейнере, затем html2canvas снимает его в изображение, а jsPDF собирает PDF (лист A4, длинная страница режется на несколько). Всё в памяти вкладки — ничего не отправляется.

Серверный путь. Код или скачанная по URL страница передаётся на наш PHP-эндпоинт, где библиотека Dompdf рендерит настоящий PDF и отдаёт его обратно. Сервер, в отличие от браузера, может скачать страницу по URL (у браузера это блокирует политика CORS).

Известные ограничения

Локально — только самодостаточный HTML. Внешние картинки и стили с других доменов браузер в этом режиме не подтянет (политика безопасности). Для страниц с внешними ресурсами лучше сервер или Ctrl+P.

Сервер не исполняет JavaScript. Dompdf рендерит HTML и CSS, но не выполняет скрипты — на сайтах, которые рисуются через JS, результат будет упрощённым. Для таких страниц лучший результат даёт браузерная печать (Ctrl+P).

Живой URL нельзя конвертировать «локально». Браузер не может прочитать чужой сайт из-за CORS — поэтому для URL есть либо сервер, либо честный путь «Открыть + Ctrl+P».

Нужно объединить несколько готовых PDF в один? Это инструмент Объединить PDF.

Попробуйте прямо сейчас — pdfredx.com, без регистрации.

Большинство онлайн-генераторов PDF из HTML устроены одинаково: вы отдаёте им свой код или адрес страницы, всё уходит на их сервер, оттуда возвращается файл. Для публичной страницы это не страшно. Но если в HTML — внутренний отчёт, черновик письма, макет с данными клиента или код с чувствительной информацией, отправлять его на чужую машину не хочется. pdfredX решает это честно: даёт два пути и прямо говорит, где обработка локальная, а где серверная.

Почему это важно

HTML-код часто содержит не только вёрстку, но и данные: суммы в квитанции, персональные поля в шаблоне письма, внутренние ссылки, комментарии в разметке. Обычный «генератор PDF из HTML» принимает всё это на свой сервер, где по политике сервиса оно может логироваться и храниться. Для рабочих документов это лишний риск ради простой операции «сохранить код страницы в PDF».

Путь 1. Локально — приватно, в вашем браузере

Выберите метод 🔒 Локально. Вставленный HTML рендерится и превращается в PDF прямо во вкладке — файл не покидает устройство.

• Ничего не отправляется. Ни код, ни данные не уходят на сервер.
• Работает офлайн после загрузки приложения.
• Лучше всего для самодостаточного HTML: стили и картинки внутри кода (inline-CSS, data-изображения).

Ограничение честно: внешние ресурсы с других доменов в этом режиме браузер не подтянет (политика безопасности), и это путь для HTML-кода, а не для живого URL.

Путь 2. Сервер — лучше вёрстка, но не 100% локально

Выберите метод 🌐 Сервер. Код или страницу по адресу рендерит наш PHP-сервер библиотекой Dompdf.

• Держит вёрстку и внешние ресурсы лучше локального пути.
• Умеет URL: сервер может скачать страницу по ссылке (браузеру это запрещает CORS).
• Честная оговорка: это базовый рендер без JavaScript, и обработка идёт на нашем сервере — не 100% локально. Хорош для документов, счетов, простых страниц; на сложных динамических сайтах результат будет упрощённым.

Мы намеренно не прячем это за общими словами «100% приватно»: если вы выбрали сервер — данные уходят на сервер. Выбор осознанный.

Путь 3 (для URL). Браузерная печать — лучшее качество, локально

Для вкладки URL есть третий, самый честный вариант — 🖨 Открыть + Ctrl+P. Мы открываем страницу в новой вкладке, вы жмёте Ctrl+P → «Сохранить как PDF». Это движок вашего браузера: лучшее качество, полная поддержка современного CSS и JavaScript, и при этом 100% локально. Для живых сайтов это часто оптимальный путь.

Что мы гарантировать не можем — честный дисклеймер

Локальный путь защищает код и данные от ухода на внешние серверы, но это не щит от всех угроз. Вредоносное ПО на устройстве, браузерные расширения с широкими правами и незашифрованный диск остаются вне нашего контроля. Серверный путь по вашему выбору отправляет данные на сервер — это компромисс ради качества вёрстки. Выбирайте путь под задачу: приватность — локально, лучший рендер живого сайта — Ctrl+P, сложную статичную вёрстку — сервер.

Соберите PDF из HTML так, как нужно вам — pdfredx.com, бесплатно, без регистрации.

Конвертация HTML в PDF — задача с тремя принципиально разными движками, и у каждого своя цена. Идеальный результат даёт headless-браузер (настоящий Chrome рендерит страницу с JS и современным CSS) — но это тяжёлый серверный компонент. В браузере без бэкенда доступен растровый путь через canvas. А на дешёвом PHP-хостинге — чистый PHP-рендер. pdfredX сознательно совмещает два реалистичных пути и честно разводит их по приватности. Разберём архитектуру.

Три движка и жёсткое ограничение CORS

headless Chrome — эталон качества, но требует Node/Chromium на сервере; на шаред-хостинге его нет. html2canvas + jsPDF — работает в браузере, приватно, но растеризует DOM и не тянет внешние ресурсы. Dompdf — чистый PHP, ставится куда угодно, но CSS 2.1 и без JavaScript.

Ключевое ограничение, которое всё определяет: браузер не может прочитать HTML чужого сайта — политика CORS блокирует межсайтовые запросы. Поэтому «ввёл живой URL → получил PDF» чисто на клиенте невозможно; URL умеет либо сервер (у него CORS нет), либо сам браузер через печать.

Путь 1. Локальный рендер: html2canvas → jsPDF

Вставленный HTML рисуется в скрытом offscreen-контейнере, html2canvas снимает его в <canvas>, а jsPDF собирает PDF с нарезкой длинной страницы на листы A4:

await ensureHtml2Canvas();                     // ленивая загрузка с cdnjs
const canvas = await html2canvas(holder, { scale: 2, backgroundColor: '#fff' });
const pdf = new jsPDF({ unit: 'pt', format: 'a4' });
const imgH = canvas.height * (pw / canvas.width);
let heightLeft = imgH, position = 0;
pdf.addImage(canvas.toDataURL('image/jpeg', 0.92), 'JPEG', 0, position, pw, imgH);
while ((heightLeft -= ph) > 0) { position -= ph; pdf.addPage(); pdf.addImage(imgData, 'JPEG', 0, position, pw, imgH); }

Плюс — 100% приватно (ничего не покидает вкладку) и CSP-совместимо (html2canvas с cdnjs разрешён в script-src). Минус — результат растровый, а внешние картинки/стили с других доменов не подгрузятся (CSP img-src/CORS). Поэтому локальный путь — для самодостаточного HTML (стили и data-изображения внутри).

Путь 2. Серверный рендер: Dompdf + защита от SSRF

Код или скачанная страница уходит POST-запросом на html2pdf.php, где Dompdf рендерит PDF. Сервер, в отличие от браузера, может скачать страницу по URL — но это открывает вектор SSRF (запрос к внутренним адресам). Поэтому и наш fetch, и собственные загрузки Dompdf прогоняются через один фильтр:

function isSafeUrl($url) {
  $p = parse_url($url);
  if (!in_array($p['scheme'], ['http','https'])) return false;   // только http/https
  foreach (resolveIps($p['host']) as $ip)
    if (!filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE))
      return false;                                              // приватные/зарезервированные IP — отказ
  return true;
}
$options->setAllowedProtocols(['http://'=>['rules'=>[$rule]], 'https://'=>['rules'=>[$rule]]]);

Плюс редиректы отключены, тайм-ауты, лимиты размера, шрифты DejaVu для кириллицы. Минус движка — CSS 2.1 и никакого JavaScript: на JS-сайтах вёрстка деградирует. Диагностика хостинга это подтвердила (PHP 8.1, cURL/exec есть, headless-браузера нет) — отсюда и выбор Dompdf, а не Chrome.

Путь 3 (для URL). Печать браузера как «лучший локальный»

Для живого адреса самый честный путь — открыть страницу и Ctrl+P → «Сохранить как PDF». Это движок самого браузера: JS, современный CSS, идеальная типографика — и при этом 100% локально. Сервер здесь не «лучше», а лишь автоматизирует (в один клик), уступая в качестве.

Компромиссы и границы

Что дальше. Опциональный платный headless-Chrome-API для тех, кому нужен идеальный автоматический рендер живого URL, — как третий метод рядом с локальным и Dompdf.

Проверьте оба пути — pdfredx.com, без регистрации.