Печатная версия страницы во фронтенде: пошаговая инструкция

В конце вы получите страницу, которая при печати или сохранении в PDF показывает только содержание: без шапки, футера, боковых панелей и кнопок. Настраивается это одним медиазапросом @media print в вашем CSS. На простой контентной странице работа займёт 30–60 минут вместе с проверкой. Отдельный HTML-шаблон для печати не нужен — браузер сам применит нужные стили, когда пользователь нажмёт Ctrl+P.

Что нужно иметь до начала

• Доступ к CSS-файлам проекта или к возможности добавить свой стиль на страницу. Если это WordPress или другая CMS — доступ к теме или к плагину, который позволяет вставить кастомный CSS.
• Браузер для проверки: Chrome, Firefox или любой на движке Chromium/Gecko. Свойства печати ниже поддерживаются всеми актуальными версиями (проверялось на Chrome 120+ и Firefox 121+).
• Понимание, какие элементы на странице лишние при печати: меню, шапка, футер, «поделиться», реклама, боковая колонка.

Если вы не можете редактировать CSS напрямую и вставляете стиль через тег <style> в HTML — это тоже сработает, но такой стиль сложнее переиспользовать на других страницах.

Как работает печатный стиль

Браузер поддерживает несколько типов носителя (media type). Для экрана применяется screen, для печати — print. Внутри блока @media print { ... } вы задаёте правила, которые действуют только в режиме печати и предпросмотра PDF. Обычные экранные стили при этом остаются и переопределяются вашими печатными — там, где селекторы совпадают по специфичности.

Печатная версия — это не отдельная страница, а тот же DOM, показанный по другим правилам. Вы не прячете данные, вы меняете их представление.

Шаги

1. Создайте блок печатных стилей. Добавьте в конец основного CSS-файла заготовку. Пока пустую — так проще проверять, что медиазапрос вообще срабатывает.

   /* печатные стили, работают только при Ctrl+P и «сохранить как PDF» */
   @media print {
     body {
       background: #fff;
       color: #000;
     }
   }

   Проверка: откройте страницу, нажмите Ctrl+P. В предпросмотре печати фон должен стать белым, текст — чёрным. Если ничего не изменилось — стиль не подключён к странице, вернитесь и проверьте путь к файлу.

2. Спрячьте лишние элементы. Задайте display: none для всего, что не нужно на бумаге. Опирайтесь на реальные классы и теги вашей вёрстки.

   @media print {
     header,
     footer,
     nav,
     aside,
     .site-banner,
     .share-buttons,
     .comments,
     .cookie-notice {
       display: none;
     }
   }

   Проверка: в предпросмотре печати остаётся только заголовок и текст статьи. Если что-то лишнее осталось — откройте инспектор (F12), найдите класс этого блока и добавьте его в список.

3. Растяните контент на всю ширину. После скрытия боковой колонки основной блок часто остаётся узким. Уберите ограничения ширины и отступы, которые были нужны только на экране.

   @media print {
     .content,
     .main-column {
       width: 100%;
       max-width: 100%;
       margin: 0;
       padding: 0;
       float: none;
     }
   }

   Проверка: текст занимает всю ширину листа, слева и справа только поля страницы, заданные принтером.

4. Настройте поля и размер страницы. Правило @page задаёт поля печатного листа. Оно стоит вне @media print, но действует только при печати.

   @page {
     size: A4;
     margin: 2cm;
   }

   Проверка: в предпросмотре поля вокруг текста стали ровными, примерно два сантиметра со всех сторон.

5. Приведите в порядок ссылки и разрывы. Ссылки на бумаге теряют адрес — можно вывести URL рядом. И запретите разрывать заголовки и таблицы посередине.

   @media print {
     /* показать адрес ссылки после текста ссылки внутри статьи */
     .article-body a[href^="http"]::after {
       content: " (" attr(href) ")";
       font-size: 0.85em;
       color: #555;
     }
     /* не отрывать заголовок от следующего абзаца */
     h1, h2, h3 {
       break-after: avoid;
     }
     /* не рвать таблицу и картинку между листами */
     table, img, figure {
       break-inside: avoid;
     }
   }

   Проверка: при многостраничном материале заголовки не остаются одинокими в конце листа, таблица не разрезается пополам, у ссылок в тексте виден адрес.

Свойство break-after и break-inside — это актуальный CSS-синтаксис¹, он заменил старые page-break-after и page-break-inside. Актуальные браузеры понимают оба, но новый предпочтительнее.

Как добавить кнопку «Печать»

CSS отвечает за внешний вид, а вызвать окно печати можно одной строкой JavaScript. Кнопку саму тоже стоит скрыть при печати, чтобы она не попала на лист.

<button onclick="window.print()" class="print-button">Печать</button>

@media print {
  .print-button {
    display: none;
  }
}

Метод window.print() открывает то же системное окно, что и Ctrl+P — отдельной библиотеки для этого не нужно.

Если не получилось

• При печати фоны и цвета пропадают. Это поведение браузера по умолчанию — он экономит краску. Если фон важен (например, цветная плашка), добавьте в нужный элемент print-color-adjust: exact; и его вендорный аналог -webkit-print-color-adjust: exact;. Полностью полагаться на это не стоит: пользователь может отключить печать фонов в диалоге принтера.
• Стили печати не применяются вообще. Проверьте, что CSS подключён без атрибута media="screen" в теге <link> — с ним файл при печати игнорируется. Уберите атрибут или поставьте media="all".
• Скрытый элемент всё равно печатается. Скорее всего, экранное правило перебивает ваше по специфичности. Найдите элемент в инспекторе, посмотрите, какой селектор побеждает, и повысьте специфичность своего — например, добавьте родительский класс перед селектором.
• Текст обрезается по правому краю листа. Значит, у контейнера осталась фиксированная ширина в пикселях больше ширины листа. Задайте ему width: 100% и уберите min-width внутри @media print.
• Псевдоэлемент с адресом ссылки выводит мусор вроде # или javascript:. Ограничьте селектор только внешними ссылками через a[href^="http"], как в шаге 5, чтобы якорные и служебные ссылки не подписывались.

Что делать дальше

Проверьте результат в двух браузерах: Chrome и Firefox рендерят поля и разрывы страниц немного по-разному. Сохраните страницу в PDF через диалог печати — это самая частая цель пользователя, и её стоит проверить отдельно от печати на бумаге. Если печатных страниц в проекте много и правила разрастаются, вынесите их в отдельный файл print.css и подключайте с media="print" — тогда браузер не будет грузить его при обычном просмотре. Генерация сложного PDF на сервере (с водяными знаками, точной пагинацией, штрихкодами) — отдельная тема, здесь мы решали задачу только средствами фронтенда.

¹ Медиазапрос (media query) — правило CSS, которое применяет стили при определённых условиях: тип носителя (экран, печать), ширина экрана, ориентация. @media print — частный случай для режима печати.