Как качественно перевести HTML-страницу в формат PDF

Сохранить HTML-документ в PDF можно тремя способами: через стандартную печать браузера (Ctrl+P), с помощью онлайн-конвертеров или программно через headless-браузеры (например, Puppeteer). Для получения качественного результата критически важно использовать отдельные CSS-стили для печати (@media print), чтобы контролировать разрывы страниц, скрыть лишние элементы интерфейса и адаптировать верстку под бумажный формат.

Если статья требует глубокой технической настройки, ниже приведено подробное руководство по каждому методу и решению типовых ошибок верстки.

Выбор инструмента: когда что использовать

Не существует универсального способа, который подходит всем. Выбор зависит от объема задач и требований к качеству:

• Браузерная печать. Идеально для сохранения одной статьи, рецепта или страницы из википедии. Быстро, бесплатно, не требует установки ПО.
• Онлайн-конвертеры. Подходят, если нужно конвертировать файл .html с компьютера, а не ссылку, и нет желания возиться с настройками принтера.
• Программные рендереры (Puppeteer, Playwright, PrinceXML). Необходимы для бизнеса: генерация счетов, договоров, билетов, отчетов. Позволяют добиться пиксельной точности и автоматизировать процесс.

Способ 1: Печать через браузер (быстрый метод)

Это самый доступный вариант, работающий в Chrome, Edge, Firefox и Safari.

1. Откройте нужную страницу.
2. Нажмите Ctrl + P (Windows/Linux) или Cmd + P (macOS).
3. В поле «Принтер» или «Назначение» выберите Сохранить как PDF (Save as PDF) или Microsoft Print to PDF.
4. Настройте параметры в предпросмотре:
   • Поля: Выберите «Минимальные» или «Нет», если дизайн требует места до края.
   • Фон: Поставьте галочку «Печатать фон» (Background graphics), чтобы сохранились цветные плашки и изображения.
   • Масштаб: Уменьшите до 90–95%, если контент не влезает по ширине.

Способ 2: Онлайн-сервисы и десктопный софт

Если браузер искажает верстку или нужно конвертировать локальный файл, используйте сторонние инструменты.

• Онлайн-конвертеры (Smallpdf, IlovePDF, HiPDF). Вы загружаете HTML-файл, сервис обрабатывает его и отдает PDF.
  • Плюсы: Не нужно ничего устанавливать.
  • Минусы: Риск утечки данных (не загружайте документы с персональными данными), ограничение на размер файла, часто платные лимиты.
• Adobe Acrobat Pro. Профессиональное решение. Позволяет открывать HTML-файлы напрямую и тонко настраивать преобразование веб-страниц.
• wkhtmltopdf. Устаревший, но все еще используемый консольный инструмент на базе движка WebKit. Прост в установке, но плохо поддерживает современный CSS (Flexbox/Grid).

Способ 3: Программная генерация (для разработчиков)

Для интеграции конвертации в веб-приложения используют headless-браузеры. Они запускают Chrome без графического интерфейса и делают «снимок» страницы в PDF.

Популярные решения:

1. Puppeteer / Playwright. Библиотеки для управления Chromium. Дают полный контроль над viewport, загрузкой шрифтов и выполнением JavaScript перед печатью.
2. PrinceXML / WeasyPrint. Специализированные движки для печати. Лучше понимают стандарты Paged Media (разрывы страниц, колонтитулы), но могут быть платными (Prince) или требовать Python (WeasyPrint).

Пример использования Puppeteer (Node.js):

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle0' });
  
  await page.pdf({
    path: 'document.pdf',
    format: 'A4',
    printBackground: true,
    margin: { top: '20mm', right: '20mm', bottom: '20mm', left: '20mm' }
  });

  await browser.close();
})();

Настройка CSS для идеальной печати

Главная ошибка — отсутствие стилей для печати. Браузер по умолчанию пытается уместить экранную верстку на лист A4, что приводит к обрезанному тексту и гигантским полям.

Используйте медиа-запрос @media print в вашем CSS-файле.

Базовый шаблон стилей

@media print {
  /* 1. Настройка страницы */
  @page {
    size: A4;
    margin: 15mm; /* Поля для принтера */
  }

  /* 2. Скрытие лишнего */
  header, footer, nav, .sidebar, .ads, button {
    display: none !important;
  }

  /* 3. Адаптация контента */
  body {
    font-size: 12pt; /* Оптимально для чтения с бумаги */
    color: #000;
    background: #fff;
  }

  a {
    text-decoration: underline;
    color: #000;
  }
  
  /* Показывать URL ссылок при печати (опционально) */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  /* 4. Контроль разрывов */
  h1, h2, h3 {
    break-after: avoid; /* Заголовок не должен оставаться внизу страницы */
  }
  
  img, table, .card {
    break-inside: avoid; /* Не разрывать картинки и таблицы */
  }
}

Частые проблемы верстки

Даже с правильными стилями могут возникать специфические ошибки. Вот как их решать:

1. Разрыв таблицы посередине строки

Таблицы часто режутся некрасиво. Чтобы шапка таблицы повторялась на каждой новой странице, а строки не делились пополам:

table {
  width: 100%;
  border-collapse: collapse;
}
thead {
  display: table-header-group; /* Шапка повторяется на новой странице */
}
tr {
  break-inside: avoid; /* Строка остается целой */
}

2. «Висячие» строки (orphans и widows)

Ситуация, когда одна строка абзаца остается на предыдущей странице или уходит на новую одна.

p {
  orphans: 3; /* Минимум 3 строки в конце абзаца на старой странице */
  widows: 3;  /* Минимум 3 строки в начале абзаца на новой странице */
}

3. Обрезка фона и изображений

По умолчанию браузеры не печатают фоновые цвета и изображения для экономии чернил.

• Решение для пользователя: В диалоге печати поставить галочку «Фоновая графика».
• Решение для разработчика: Использовать свойство -webkit-print-color-adjust: exact; (или print-color-adjust: exact;) для элементов, где фон критичен.

4. Flexbox и Grid ломаются при печати

Некоторые старые версии движков печати плохо справляются с сложными сетками.

• Решение: Для критически важных блоков в @media print переключайте display: flex на display: block или используйте явные размеры в mm/cm, а не в %/vw.

FAQ

Почему PDF выглядит не так, как страница в браузере? Экран имеет разрешение 72–96 DPI и использует RGB-цвета, а печать ориентирована на 300 DPI и CMYK (условно). Кроме того, ширина экрана вариативна, а лист A4 фиксирован (210 мм). Без специальных CSS-стилей браузер просто масштабирует контент, нарушая пропорции.

Как сохранить страницу с динамическим контентом (JavaScript)? Простая печать может не захватить данные, которые подгружаются асинхронно. Используйте режим ожидания загрузки сети (waitUntil: 'networkidle0' в Puppeteer) или делайте скриншот/PDF только после появления нужных элементов на странице.

Можно ли сделать PDF с кликабельным оглавлением? Да, но стандартная браузерная печать этого не делает. Для создания интерактивного оглавления (bookmarks) нужны специализированные инструменты вроде PrinceXML или библиотеки PDFKit, которые генерируют структуру документа программно.

Что делать, если текст вылезает за правый край листа? Проверьте наличие жестко заданных ширины в пикселях (width: 1200px) у контейнеров. В стилях для печати замените их на width: 100% или max-width: 100%. Также поможет уменьшение масштаба печати в диалоговом окне браузера.