Как убрать URL, дату и заголовок при печати страницы

Быстрый ответ

Для того чтобы URL не появлялись на распечатанных веб-страницах, можно использовать CSS. Необходимо создать медиа-запрос для печати, который будет выглядеть так:

@media print {
  /* Спрятать URL при печати */
  a[href]:after { content: none; }
  /* Обнулить поля на странице */
  @page { margin: 0; }
}

Такой код позволит убрать URL, которые привязываются к гиперссылкам при печати, и области на странице, где обычно размещаются колонтитулы.

Изнанка процесса: принципы печати и стратегии

Настройка печати в Chrome, Firefox, IE

В каждом браузере имеются собственные инструменты для настройки печати:

• Chrome и Edge обладают функционалом отключения колонтитулов через системный диалог печати (Ctrl+Shift+P).
• В браузере Firefox это осуществляется через меню "Настройка страницы" в разделе "Поля и колонтитулы".
• В Internet Explorer найти подобные настройки можно в разделе "Печать" > "Настройка страницы".

Подробнее об этом расскажет наш спикер на видео

Использование POST-запросов для скрытия информации

Метод POST обеспечивает защиту приватной информации, скрывая ее из URL, что в свою очередь увеличивает безопасность при печати страниц.

Автоматическая подстройка размера страницы

Для того чтобы контент идеально вмещался в лист печати:

@media print {
  /* Страница автоматически настраивается под размер содержимого */
  @page { size: auto; }
}

Таким образом, контент будет самостоятельно адаптироваться под формат печатного листа.

Визуализация

Представим веб-страницу как картину на стене:

🖼️ = Содержимое сайта  | 🏷️ = Не нужный при печати URL

Решение позволяющее избавиться от не нужной атрибутной информации при печати:

@media print {
  a[href]:after {
    content: none;
  }
}

В конечном итоге получится:

🖼️🖼️🖼️ = Печать контента без URL 🚫🏷️

Только содержимое вашей страницы со всем его великолепием.

Усовершенствованный метод при помощи CSS

Для того чтобы убрать ненужные при печати элементы:

@media print {
  /* В версии для печати всё будет черно-белым */
  body {
    color: black;
    background: white;
  }
  /* Скрываем изображения и видео */
  img, video {
    display: none;
  }
  /* Нет навигации, подвала и рекламы */
  .navigation, .footer, .ads {
    display: none;
  }
}

Управление предпросмотром печати

Заранее настраиваем содержимое:

/* Подготавливаем страницу к печати */
window.onbeforeprint = function() {
  // Применим индивидуальные настройки
};
/* Возвращаем страницу в исходное состояние */
window.onafterprint = function() {
  // Восстанавливаем нормальные параметры
};

Таким образом, вы получите больше контроля над результатом печати.

Доступность для пользователей с ограниченными возможностями зрения

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

Полезные материалы

1. @page – CSS | MDN — документация CSS-правила @page.
2. Стили печати в 2018 году | Smashing Magazine — обзор современных подходов к стилизации печати.
3. opencv cvarrtoMat segfault | Stack Overflow — обсуждение вопроса скрытия URL при печати на Stack Overflow.
4. Полное руководство по медиа-запросам CSS | CSS-Tricks — подробнее о медиа-запросах и стилях печати.