Печать

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

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

Возможно, существуют и другие случаи, когда вы хотите управлять процессом печати, но это одни из наиболее распространенных сценариев. Эта статья предоставляет советы и техники для улучшения печати веб-контента.

Использование таблицы стилей для печати

Добавьте следующее в тег <head>.

<link href="/path/to/print.css" media="print" rel="stylesheet" />

Использование медиа-запросов и @page для управления содержимым печати

Вы можете использовать CSS-правило @media, чтобы установить разные стили для вашего веб-страницы при печати на бумаге или в формате PDF по сравнению с отображением на экране. Тип медиа print media type устанавливает стили для печатных носителей; эти стили будут использоваться только для печатного контента.

Добавьте это в конец вашей таблицы стилей. Обратите внимание, что правила специфичности и очередности все еще применяются:

@media print {
  /* All your print styles go here */
  #header,
  #footer,
  #nav {
    display: none !important;
  }
}

Вы также можете использовать правило @page, чтобы изменить различные аспекты печатных страниц, включая размеры страницы, ориентацию и поля. Правило @page может использоваться для указания на все страницы в распечатке или только на определенный подмножество страниц.

Обнаружение запросов на печать

Браузеры отправляют события beforeprint и afterprint для определения того, произошла ли печать. Вы можете использовать это для настройки пользовательского интерфейса, представленного во время печати (например, отображать или скрывать элементы пользовательского интерфейса во время процесса печати).

Примеры

Вот некоторые общие примеры.

Автоматическое закрытие окна по завершении

Следующий пример закроет окно после того, как пользователь распечатает его содержимое:

window.addEventListener("afterprint", () => self.close);

Печать внешней страницы без её открытия

Если вы хотите иметь возможность распечатать внешнюю страницу без её открытия, вы можете использовать скрытый <iframe> (см.: HTMLIFrameElement), автоматически удаляя его после того, как пользователь распечатает его содержимое. Следующий пример распечатает файл под названием externalPage.html:

HTML

<button id="print_external">Print external page!</button>

JavaScript

function setPrint() {
  const closePrint = () => {
    document.body.removeChild(this);
  };
  this.contentWindow.onbeforeunload = closePrint;
  this.contentWindow.onafterprint = closePrint;
  this.contentWindow.print();
}

document.getElementById("print_external").addEventListener("click", () => {
  const hideFrame = document.createElement("iframe");
  hideFrame.onload = setPrint;
  hideFrame.style.display = "none"; // hide iframe
  hideFrame.src = "external-page.html";
  document.body.appendChild(hideFrame);
});

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Printing