Вывод страницы на печать: универсальное решение

Доброго времени суток, уважаемый читатель!

Сегодня мы кратко, но внятно рассмотрим способ вывода страницы на печать методом, который не привязан к какой-либо конкретной CMS. Потому, данный подход может претендовать на звание «универсального решения». Решение на само деле простое и включает всего два этапа. Давайте начнем!

Вывод кнопки «Распечатать»

Достаточно добавить в шаблон сайта следующую строку:

<a href="#" onclick="window.print()">Распечатать</a>

Либо так:

<a href="#" onclick="window.print();return false;">Распечатать</a>

Почему так просто? Дело в том, что данная ссылка является альтернативой комбинации клавиш Ctrl+P.

Таким образом вывод на печать готов и работает. Однако сама страница выглядит отвратительно. Блоки могут сползти, отступы оказались лишними, а часть элементов вовсе не нужны. Это ключевой момент. Учтите, что если страницу вашего сайта хотят вывести на печать — элементов должно быть по минимуму. Только самое информативное.

Давайте решим данную проблему.

Оформление версии для печати

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

Если оформление версии для печати будет находиться в основном CSS-файле:

<link rel="stylesheet" href="/style.css" media = "screen, print"/>

Если оформление будет находиться в отдельном CSS-файле:

<link rel="stylesheet" href="/style.css" media = "screen"/>
<link rel="stylesheet" href="/print.css" media = "print"/>

С подключением стилей разобрались. Едем дальше.

В необходимый CSS-файл добавляем следующий код:

/*пример оформления версии сайта для печати*/
@media print {
body {background:#fff; font-size:1em;}
.block1, .block2, .block3 {display:none}
.content {padding:0; margin:0}
}

Здесь все сугубо индивидуально.  Задача: убрать все лишнее, а оставшееся привести в надлежащий вид.

Заключение

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

Пробуйте, экспериментируйте. Желаю Удачи!

Опубликовано: 21 февраля 2016 года, в рубрике «Разработка».

Просмотров: 2979.

Метки: , , .

Все публикации