Реализация печати страниц сайта (Print CSS)

Проблема: экран и печать — разные миры

Страница выглядит отлично на мониторе, но при выводе на печать превращается в кашу из обрезанных баннеров, sticky-хедера, мелкого текста и нечитаемых ссылок. 70% пользователей сталкиваются с этой проблемой. Print CSS в 2 раза сокращает время на подготовку документов к печати и уменьшает расход бумаги на 30%. Мы решаем эту задачу с помощью грамотно настроенного print CSS — отдельного набора правил и минимального JavaScript. Наш опыт: более 50 успешных проектов, гарантия результата.

Почему print CSS — отдельная дисциплина?

Экранные стили не подходят для бумаги. Разные разрешения, цветовые модели (RGB vs CMYK), шрифты (sans-serif vs serif), необходимость скрывать интерактивные элементы. Исследования Nielsen Norman Group показывают, что 70% пользователей жалуются на проблемы при печати из браузера. Print CSS требует понимания механики разрыва страниц, повторяющихся заголовков таблиц, колонтитулов и корректной обработки фонов. Мы разбирали сложные случаи: от финансовых отчётов с десятками таблиц до промо-страниц с брендированными цветами.

Как настроить print CSS для сложных таблиц?

Вот пошаговая инструкция по настройке печати для сайта с таблицами и мультимедиа:

1. Скрыть ненужные элементы интерфейса: header, footer, nav, sidebar, баннеры, cookie-уведомления, чат-виджеты.
2. Настроить типографику для бумаги: serif-шрифт, размер 12pt, межстрочный интервал 1.5, отображение URL ссылок.
3. Управлять разрывами страниц: принудительный разрыв перед главами, избегать разрывов внутри таблиц и списков.
4. Настроить таблицы: повторять заголовок на каждой странице, запретить разрыв строк, стилизовать границы и фоны.
5. Добавить колонтитулы и нумерацию страниц через CSS @page.
6. Протестировать в браузерах и на физическом принтере.

Базовая структура и сброс стилей

Первым делом прячем всё, что не нужно на бумаге: header, footer, nav, sidebar, баннеры, cookie-уведомления, чат-виджеты. Контент растягиваем на 100% ширины, убираем тени и скругления.

@media print {
  header, footer, nav, aside, .sidebar, .cookie-banner, .chat-widget, .share-buttons, .advertisement, .back-to-top, [data-noprint], .no-print {
    display: none !important;
  }
  .container, .wrapper, main, article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 0 !important;
  }
}

Типографика для бумаги

Для печати используем serif-шрифты (Georgia, Times New Roman) с базовым размером 12pt. Увеличиваем заголовки, настраиваем межстрочный интервал, добавляем orphans и widows для контроля вдових строк. Ссылки дополняем отображением URL. Для детального понимания смотрите документацию Media queries.

@media print {
  body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  h1 {
    font-size: 24pt;
    margin-bottom: 12pt;
  }
  h2 {
    font-size: 18pt;
    margin-bottom: 8pt;
  }
  h3 {
    font-size: 14pt;
    margin-bottom: 6pt;
  }
  p, li {
    font-size: 12pt;
    orphans: 3;
    widows: 3;
  }
  a[href]:after {
    content: ' (' attr(href) ')';
    font-size: 10pt;
    color: #555;
  }
  a[href^='#']:after, a[href^='javascript:']:after {
    content: '';
  }
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
}

Управление разрывами страниц и @page

Настраиваем принудительные разрывы перед главами, избегаем разрывов внутри таблиц и списков, контролируем отступы @page и добавляем колонтитулы.

@media print {
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }
  .no-break, table, figure, blockquote {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .page-break-before, section.chapter {
    page-break-before: always;
    break-before: page;
  }
  .page-break-after {
    page-break-after: always;
    break-after: page;
  }
}
@page {
  size: A4 portrait;
  margin: 2cm 2.5cm 2cm 2.5cm;
}
@page :first {
  margin-top: 3cm;
}
@page :left {
  margin-left: 3cm;
}
@page :right {
  margin-right: 3cm;
}
@page {
  @top-right {
    content: 'ООО «Компания» — конфиденциально';
    font-size: 9pt;
    color: #999;
  }
  @bottom-center {
    content: 'Стр. ' counter(page) ' из ' counter(pages);
    font-size: 9pt;
  }
}

Таблицы: заголовки на каждой странице и стилизация

Чтобы большие таблицы не превращались в кашу, повторяем шапку на каждом листе, запрещаем разрыв строк и настраиваем принтер-френдли цвета.

@media print {
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  tr {
    page-break-inside: avoid;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #999;
    padding: 4pt 6pt;
    text-align: left;
  }
  th {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

Фоновые цвета и JavaScript: кнопка печати и события

Для брендированных блоков используем print-color-adjust: exact. Логотипы — через ::before с изображением, а не через background-image. Добавляем JS для кнопки печати выбранной области и обработчики beforeprint/afterprint для раскрытия аккордеонов и форсирования lazy-загрузки.

function printPage(selector?: string) {
  if (selector) {
    const content = document.querySelector(selector);
    if (!content) return;
    const printWindow = window.open('', '_blank');
    if (!printWindow) return;
    printWindow.document.write(`
      <!DOCTYPE html>
      <html>
      <head>
        <title>${document.title}</title>
        <link rel="stylesheet" href="/css/app.css">
      </head>
      <body class="print-only">
        ${content.innerHTML}
      </body>
      </html>
    `);
    printWindow.document.close();
    printWindow.focus();
    printWindow.onload = () => {
      printWindow.print();
      printWindow.close();
    };
    return;
  }
  window.print();
}

document.querySelectorAll('[data-print-btn]').forEach(btn => {
  const selector = btn.getAttribute('data-print-target');
  btn.addEventListener('click', () => printPage(selector ?? undefined));
});

window.addEventListener('beforeprint', () => {
  document.querySelectorAll('.accordion-content[hidden]').forEach(el => {
    el.removeAttribute('hidden');
    el.setAttribute('data-was-hidden', 'true');
  });
  document.querySelectorAll('img[loading="lazy"]').forEach(img => {
    const image = img as HTMLImageElement;
    if (image.dataset.src) image.src = image.dataset.src;
  });
});

window.addEventListener('afterprint', () => {
  document.querySelectorAll('[data-was-hidden]').forEach(el => {
    el.setAttribute('hidden', '');
    el.removeAttribute('data-was-hidden');
  });
});

Типичные проблемы печати и их решения

Для каждой проблемы мы подбираем индивидуальное решение. Например, если фоновые цвета не печатаются, используем print-color-adjust: exact и проверяем настройки принтера. Если таблицы разрываются, добавляем page-break-inside: avoid на строки. Обработка таких нюансов требует опыта — наш инженер помогает избежать 90% типовых ошибок.

Что входит в работу

• Аудит текущих стилей и выявление элементов, мешающих печати
• Разработка print CSS: сброс, типографика, разрывы, таблицы, фоны
• Настройка колонтитулов, нумерации страниц и размера бумаги
• JavaScript: кнопка печати (вся страница или выбранная область) и обработчики before/after print
• Тестирование в Chrome, Firefox, Edge, Safari; проверка на реальном принтере при необходимости
• Интеграция в ваш проект (WordPress, Laravel, React и др.)
• Документация и комментарии в коде

Сроки и стоимость

Стоимость рассчитывается индивидуально в зависимости от объёма и сложности. Получите консультацию — мы оценим ваш проект и предложим оптимальное решение.

Чек-лист перед сдачей

• [ ] Навигация, баннеры, виджеты скрыты
• [ ] URL ссылок отображаются (кроме якорей и javascript:)
• [ ] Таблицы не разрываются посередине строки
• [ ] Изображения не выходят за поля страницы
• [ ] Нет пустых первых страниц
• [ ] Шрифт читаем (не меньше 10pt)
• [ ] Колонтитулы и нумерация страниц работают
• [ ] Фоновые цвета брендированных блоков корректно печатаются

Свяжитесь с нами, чтобы обсудить ваш проект. Закажите реализацию print CSS — получите идеальную печать без лишних хлопот. Гарантия результата.