Поиск

Реклама

--------

Рубрики

Архивы

Свежие заметки

18
Фев

Выводим на печать только часть вебстраницы или как сделать сайт print-friendly за 10 минут

Мало кто об этом раньше говорил, но сегодня уже перестало быть хорошим тоном и перешло в категорию «a must» удобство преподнесения информации сайтом пользователю. Более того, рядовой посетитель должен не только «легким движением» смочь найти и прочинать нужную ему информацию, но и взять с собой.

Как-то я наблюдал, как в одной небольшой компании девочка-секретарь пыталась распечатать мне информацию с их корпоративного сайта — открыла сайт, скопировала текст в Word, потом красила шрифт (на сайте он был желтого цвета), печатала. Именно для того, чтобы пользователи смогли распечатать красивый презентабельный документ, очень много сайтов выкладывают либо PDF-версии нужных страниц, либо дублируют контент на отдельных «страницах для печати».

Я считаю, что создание PDF-дубликатов сайта, если информация скорее всего будет распечатана или скачана с сайта для локального хранения — это лучший вариант. PDF поддерживает массу приятных вещей по типу поиска по тексту и тп, но сейчас мы говорим именно о печати. PDF позволяет на принтере получить именно в таком виде информацию, как это хочет владелец сайта. Очень хороший пример — документация с сайта developer.apple.com — любая статья на сайте доступна в прекрасно подготовленном PDF-варианте. Генерировать простой PDF-файл на сайте, который работает на PHP, достаточно несложно, например, с помощью бесплатного PHP класса FPDF. Но все это требует финансовых вложений: a) несколько дней (а то и недель) времени программиста б) значительных серверных ресурсов, если генерация динамическая и используется активно.

Какие есть альтернативы? Недавно заметил на некоторых сайтах такую интересную особенность — при попытке печати сайта (просто нажимаем Print в браузере) на принтер выводится далеко не все, что видно на экране (меню, баннеры, счетчики), а только основной контент — например, сама новость (если мы на странице новости), статья, карта «Как нас найти». Действительно, кому нужен рекламный блок Google AdSense на печатной копии сайта? :)

Пример вывода на печать только части HTML страницы

Как же они это делают?!

Оказывается, очень просто! И на стороне клиента — сервер не участвует в этом вообще. Дело в минимальной модификации HMTL-кода. Создадим простой пример в HTML/CSS2:

<html>
<head>
<title>Test File</title>
<style type=»text/css»>
@media print {
 #noprint {display:none; }
}
</style>
</head>
<body>
<p>Заголовок статьи</p>
<p id=noprint>Здесь может быть меню, Ваша реклама и тп</p>
<p>А здесь — важная статья</p>
</body>
</html>

На принтер уйдет вот такая страница:

<html>
<head>
<title>Test File</title>
</head>
<body>
<p>Заголовок статьи</p>
<p>А здесь — важная статья</p>
</body>
</html>

Это очень полезно и тогда, когда шапка сайта занимает полстраницы и/или состоит из flash-элементов.

Более того, в случае желтого фонта на сайте (или белого цвета шрифта сайта и черного фона) можно в @media print {} определить подходящие шрифты для печати.

Кстати, в @media screen {} можно определять что-то только для вывода на экран. Но это уже отдельная тема.

Вот еще варианты подгрузки css только для печати.

<link rel=»stylesheet» type=»text/css» href=»printexample.css» media=»print»>

Или вот так:

<style type=»text/css» media=»print»>
@import «printexample.css»;
</style>

Вот все доступные media согласно спецификации CSS2:

  • all (по умолчанию)
  • aural
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv

HMTLь-те :)

 

2 коммент.

Оставьте комментарий или два

(обязательно)

Введите цифру-ответ на вопрос ниже (проверка против спама :)) *