Print Me

Printing

There may be times in which your website or application would like to improve the user’s experience when printing content. There are a number of possible scenarios:

• You wish to adjust layout to take advantage of the size and shape of the paper.
• You wish to use different styles to enhance the appearance of your content on paper.
• You wish to use higher resolution images for a better result.
• You want to adjust the user experience of printing, such as presenting a specially-formatted version of your content before printing begins.

There may be other cases in which you want to manage the printing process, but these are some of the most common scenarios. This article provides tips and techniques for helping your web content print better.

Using a print style sheet

Add the following to your tag.

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

Using media queries to improve layout

You can use the CSS @media at-rule to set a different appearance for your webpage when it is printed on paper and when it is displayed on the screen. The print option sets the styles that will be used when the content is printed.

Add this at the end of your stylesheet. Note that specificity and precedence rules still apply:

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

Detecting print requests

Browsers send beforeprint and afterprint events to let content determine when printing may have occurred. You can use this to adjust the user interface presented during printing (such as by displaying or hiding user interface elements during the print process).

Examples

Here are some common examples.

Open and automatically close a popup window when finished

If you want to be able to automatically close a popup window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this:

doctype html> html lang="en-US"> head> meta charset="utf-8" /> meta name="viewport" content="width=device-width" /> title>JavaScript Window Close Exampletitle> script> function popuponclick()  const my_window = window.open( "", "mywindow", "status=1,width=350,height=150", ); my_window.document.write(""); my_window.document.write(''); my_window.document.write( "
When you print this window, it will close afterward.
", ); my_window.document.write(""); > script> head> body> p> To try out the code>afterprintcode> event, click the link below to open the window to print. You can also try changing the code to use code>beforeprintcode> to see the difference. p> p>a href="javascript: popuponclick()">Open Popup Windowa>p> body> html> 

Print an external page without opening it

If you want to be able to print an external page without opening it, you can utilize a hidden (see: HTMLIFrameElement), automatically removing it after the user prints its contents. The following is a possible example which will print a file named externalPage.html :

doctype html> html lang="en-US"> head> meta charset="utf-8" /> meta name="viewport" content="width=device-width" /> title>MDN Exampletitle> script> function closePrint()  document.body.removeChild(this.__container__); > function setPrint()  this.contentWindow.__container__ = this; this.contentWindow.onbeforeunload = closePrint; this.contentWindow.onafterprint = closePrint; this.contentWindow.focus(); // Required for IE this.contentWindow.print(); > function printPage(sURL)  const hideFrame = document.createElement("iframe"); hideFrame.onload = setPrint; hideFrame.style.position = "fixed"; hideFrame.style.right = "0"; hideFrame.style.bottom = "0"; hideFrame.style.width = "0"; hideFrame.style.height = "0"; hideFrame.style.border = "0"; hideFrame.src = sURL; document.body.appendChild(hideFrame); > script> head> body> p> span onclick="printPage('externalPage.html');" style="cursor:pointer;text-decoration:underline;color:#0000ff;"> Print external page! span> p> body> html> 

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Источник

Печать HTML страниц

Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге:

Подключение CSS

Специальный CSS-файл:

Правило @media print:

Третий метод – отдельная страница или шаблон, свёрстанные чисто под печать (без @media print ), например так сделана печать писем в Яндекс.Почте. Такой метод существенно облегчает отладку.

Размер страницы

• при dpi=75, А4 имеет 877×620 px
• при dpi=150, А4 имеет 1754×1240 px
• при dpi=300, А4 имеет 3508×2480 px

Поля

В целях экономии бумаги лучше использовать минимальные поля – 10 мм по краям и 20 мм слева для возможности брушеровки.

Поля по ГОСТ Р 6.30-2003 (оформление документов):

По ГОСТ 7.32-2017 (научные работы, рефераты):

Удаление лишних стилей

Тени и другие эффекты дизайна лучше убрать, также следует установить черный цвет шрифта.

Размер шрифта

Если на сайте размер шрифтов указан в пикселях, то при печати размер будет больше чем на экране. Поэтому нужно выставить новые значения:

Скрытие лишних элементов

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

Другой вариант скрытия не нужного контента – в HTML-коде, добавить к скрываемым элементам класс noprint .

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

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

@media screen < .element < display: none; >> @media print < .element < display: block; >>

Печать фона background

По умолчанию браузеры не печатают background у элементов, но его можно пустить на печать принудительно c помощью свойства -webkit-print-color-adjust: exact; и нового color-adjust: exact; .

Уточнение: свойство не будет работать если цвет фона и шрифта слабоконтрастные.

Разрывы страниц

В CSS доступно управление переносами, соответственно для списков и таблиц нужно запретить переносы:

Если требуется принудительно сделать перенос после элемента:

Отображение URL в ссылках

Печать ссылок бесполезна т.к. будет не известно, куда они ведут. Можно добавить приписку URL рядом с анкором (исключая якорные ссылки).

Пример вставки URL:

Вывод QR-кода при печати

Будет очень удобно если на печатаной странице будет QR-код с ссылкой на сайт. Сгенерировать код можно с помощью сервиса «Google QR Codes» и вставить его с помощью JQuery.

Запуск печати

В JS, печать запускается методом window.print() . Возможны следующие варианты: Запуск печати по клику на ссылку:

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

И последний вариант – печать происходит в отдельной вкладке браузера, после печати она автоматически закрывается.

Источник

CSS печатной версии страницы

На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?

Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media:

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

h1, div#header, div#sidebar, div#footer

Правила страницы для печати

1. Современные браузеры умеют удалять фоновое изображение. Однако желательно добавлять background-image: none, чтобы старые браузеры тоже умели это.

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

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

Немного модифицировав код, можно добавить отображение URL только внешним ссылкам:

4. Для больших текстов иногда будет уместно разделение на части. Следующий код разбивает контент на каждом заголовке H3, печатая на новой странице:

А этот код поможет печатать каждую статью с новой страницы, может быть полезно при распечатке списка записей блога:

5. Желательно переназначить стили сайтов с темным или ярким дизайном в стандартную цветовую схему — черный текст на белом фоне. Это удобно и для читабельности, и для экономии расходнвх материалов в принтере пользователя.

Корректное отображение

Как уже сказано выше, современные браузеры умеют удалять ненужные элементы при печати, однако это не всегда требуется. В Firefox пользователь может сам контролировать внешний вид результата, в Chrome и Safari можно использовать код, приведенный ниже для отображения исходного стиля:

Как это выглядит в действии:

Качество печати

Зачастую результат печати сильно отличается от исходного на экране в худшую сторону. Одну из частых причин этого разберем на простом примере. Есть светлый текст на темном фоне:

Браузер попытается привести версию для печати в нормальный вид:

Если на странице есть изображение, например логотип, то браузер его никак не корректирует, и получается ужасно:

Еще хуже все выглядит, если в качестве лого используется векторное изображение с прозрачностью:

Избежать этого ужаса можно при использовании CSS3 Filter:

Для Firefox можно использовать SVG:

Источник