Если вы разработчик сайтов, то наверняка не раз сталкивались с потребностью в том, что бы распечатать страницу с целью, к примеру, предоставления отчетности не сохраняя документ на компьютер и не создавая лишних файлов.
Первым и основным шагом, которым нам следует сделать - это определится с размером печатаемой области. Потому как наши мониторы не отображают естественный размер листа и области, которую нам стоит напечатать.
Это можно сделать очень просто – стоит перевести пиксельный размер печатаемой области в сантиметры или миллиметры, и тогда можем понять достаточно ли нам будет такого размера для носителя (прим. бумаги), если конечно не будем печатать на плоттере формата А1. После того как определились с размером стоит приступить к стилям CSS.
Мало кому известно, что когда мы подключаем CSS файл к нашему веб документу, мы можем указать для какого устройства использовать этот CSS файл. А делается это при помощи атрибута media тега link.
Пример:
- для экранов: <link href="file.css" media="screen" />
- для печатной техники: <link href="file.css" media="print" />
А если быть точнее то стоит добавлять первый вариант на реальной веб-странице, а второй к примеру во всплывающем окне, или же все на одной странице только лишь придётся переопределять стили. Еще одним советом будет использование javascript кнопки для печати, этого можно добиться путем добавления к тегу "input" с типом "button" события "onclick" с таким текстом "javascript:print('document.body')".
<input type="button" onclick="javascript:print('document.body')" value="Print"/>
