CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Печатная версия с Javascript

Я всегда знал два подхода к печатным версиям: старого типа - ставим ссылку "печатная версия", пользователь переходит на новую страницу и видит печатную версию этой же страницы, и новый: добавляем css media="print", и только знающие люди могут нажать Print Preview или догадаться распечатать эту страницу. Вот и пришла маленькая идея комбинации лучших сторон этих двух подходов.

Что я хочу

HTML

1. <!--Для собственно принтеров -->
2. <link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
3. <!--Для нашего превью с джаваскриптом -->
4. <link rel="alternate stylesheet" type="text/css" media="screen,projection" href="css/print.css" title="printview" disabled />

Теперь страничка полноценная - у нее есть печатная версия, и она нормально отображается в броузерах. Дело за магией.

Javascript

Потому я обратился к другой статье(спасибо CB за наводку), где описывается метод буквального отключения CSS Disabling
По сути взял с минимальными изменениями джаваскрипт оттуда, вот что я использовал для решения задачи:

function setPrintCSS(isPrint) {
// Определяем поддержку нужного нам элемента в броузерах
  if (document.getElementsByTagName)
      x = document.getElementsByTagName('link');
  else if (document.all)
      x = document.all.tags('link');
  else
  {
      alert('Простите, этот скрипт не работает в вашем броузере');
      return;
  }
// Пробегая по всем элементам LINK в HTML  - включаем и отключаем нужные нам стили
// идентифицируя их по атрибуту title
// параметр isPrint - отвечает просто за вариант стилей для печти или монитора
  for (var i=0;i<x.length;i++) {
      if(x[i].title == 'printview'){x[i].disabled = !isPrint;}
      if(x[i].title == 'screenview'){x[i].disabled = isPrint;}
  }
}

(немного более логичный нейминг по сравнению с первым вариантом, спасибо CB)
В результате в HTML можно добавить две ссылки вида:

1. <a href="#" onclick="setPrintCSS(false)">Вернуться к стандартному виду</a>
2. <a href="#print" onclick="setPrintCSS(true)">Печатная версия</a>

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

if(document.location.hash=='#print') setPrintCSS(true);

Смотреть пример с работающим #print.

Ссылки

• Update: Пример с переработанным кодом, теперь работает #print, сам пример и печатная версия(в адрес добавлено #print)
• Мой пример
• Пример из апдейта(см. ниже)
• Статья PPK
• Второй пример
• Print to Preview - статья с похожей идеей на алистапарте

В конце

Обновлено: Спасибо Vladson за второй способ быстрой замены стилей, чуть менее абстрактный, но иногда возможно оптимальный. Задаем параметр id для элемента link(например main-css), и тогда

1. <a href="#" onclick="document.getElementById('main-css').href = 'css/base.css'">Вернуться к стандартному виду</a>
2. <a href="#" onclick="document.getElementById('main-css').href = 'css/print.css'">Печатная версия</a>

Оба споосба еще нуждаются в тестировании - но под виндой работают под всеми броузерами. А последний и под Konqueror.