Pull to refresh

Печать из браузера

Reading time 4 min
Views 7.9K
Web наступает. Все больше и больше обычных настольных приложений переезжает в Internet. Уже никого не удивить онлайновым текстовым или графическим редактором. А уж различные многопользовательские комплексы, базы данных, системы отчетности — тут раздолье для веб-технологий. Например, еще несколько лет назад было бы вполне нормально сделать систему регистрации и учета клиентов скажем стоматологической поликлиники или библиотеки в Delphi, добавить базу данных и сетевую часть. Но сейчас такое решение окажется неразумным: гораздо проще, удобнее, а значит и эффективнее использовать все то, что предоставляет нам Web, даже если приложением будут пользоваться только внутри локальной сети. Кроме того, такое решение кроссплатформенное, что актуально в связи с наметившейся тенденцией перехода к свободным ОС. Все что нужно на клиентских компьютерах — наличие браузера, никаких установок, настроек и прочего.

Но у решения все делать в web есть недостаток (даже не один, но я сейчас не буду перечислять все): неудобство при печати отчетов, бланков документов и прочих печатных страниц. Это связано с тем, что веб-страницы рассчитываются прежде всего для отображения на экране монитора и не подтачиваются для печати, что нередко ведет к расползанию печатной страницы. К счастью это все временные трудности и их можно обойти. Можно, например, генерировать отчеты в pdf или doc. Но я считаю это не слишком удобным: пользователю надо устанавливать программы, работающие с этими форматами, каждый раз выкачивать с сервера сгенерированный файл, печатать из сторонней программы, а не браузера. Поэтому стоит приложить усилия к созданию страниц, правильно выводящихся на печать прямо из браузера.


Раз имеются отдельные версии страницы для отображения на экране и для печати, то следует разделить CSS на две части по назначению. Свойства элементов, специальные для отображения на экране будут храниться в блоке
media screen {}
а для печати, соответственно, в
media print {}

Первое, что нужно сделать — отключить все лишние графические элементы: баннеры (в веб-приложении для локальной сети врядли они будут), меню, еще что-нибудь. Достигается это следующей конструкцией в CSS:

media print {
.banner {display:none;}
}

Также запрещаем отображение других лишних блоков. Возможно, некоторые блоки наоборот стоит отображать при печати, а на экране скрывать. Красивый цветной логотип наверняка на черно-белом принтере распечатается грязным или недостаточно четким, стоит подменить его на специальный контрастный:
media screen {
div.logo {background: url(img/logo.png) no-repeat top;}
}
media print {
div.logo {background: url(img/logo_print.png) no-repeat top;}
}

Скорее всего пользователь веб-приложения будет распечатывать страницу на принтере формата A4 (если только это приложение не для полиграфии). Ограничим страницу нужным размером, вставив конструкцию page. Можно указать размеры страницы (обязательно в сантиметрах или дюймах, ни в коем случае не в пикселах!), так для A4 это 8.5x11 дюймов или 21x29.7 см.
page {
size 8.5in 11in;
margin: 1cm
}

Если предполагается двухсторонняя печать, то следует различать левую и правую страницы:
page :left {
margin-left: 4cm;
margin-right: 3cm;
}

page :right {
margin-left: 3cm;
margin-right: 4cm;
}

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

При печати многостраничных отчетов или заполненных бланков документов потребуется каждую часть отчета или каждый бланк выводить на отдельную страницу. Мне показалось очень удобным на экране показать разрыв страницы с помощью горизонтальной черты hr, а при печати по ней делать разрыв страницы:
media print {
hr {PAGE-BREAK-AFTER: always; visibility: hidden;}
}

Напомню, что PAGE-BREAK-AFTER заставляет принтер продолжить печать со следующей страницы после вывода элемента с этим свойством, а PAGE-BREAK-BEFORE — перед выводом. В приведенном мной примере hr при печати не отображается (visibility: hidden), но это не мешает ему управлять принтером.

В одном из моих проектов оператору нужно было заполнять форму с данными клиента, после чего ему может понадобиться распечатка этой формы со специальным форматированием. Я решил на одной странице объединить и версию для отображения на экране с полями ввода формы и версию для печати. Это упрощает задачу оператора: достаточно после ввода данных и сохранения нажать кнопку «Распечатать» без загрузки специальной страницы.

Для этого я сформировал форму ввода данных в виде пустого бланка документа. Кстати, это хорошая идея: форма получается компактная и выглядит почти как на бумаге. Далее собираем на одной странице две версии документа, ловко манипулируя свойством display. Каждое поле в HTML выглядит так (упрощенно):

ФИО клиента:
/>
Вася Пупкин


Обратите внимание на этот span — в нем дублируется значение поля. CSS-файл такой:

media screen {
.field {display: none;}
}
media print {
input {display: none;}
td {border: 1px solid;}
.field {text-decoration: underline;}
}

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

Напоследок хочу сказать об одном неприятном моменте. Браузером устанавливаются свои поля страницы и колонтитулы. Это может разом испортить весь красиво сформированный бланк документа или растянуть страницу на две. JavaScript эту проблему не решит. Поэтому остается лишь попросить пользователя (высветив напоминание) убрать в браузере поля и колонтитулы.
Tags:
Hubs:
+15
Comments 12
Comments Comments 12

Articles