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

07 Apr, 2007

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

Что я хочу

А хочу я, что бы по клику на ссылку "печатная версия" какой то волшебник заменял media="print" на media="screen", и страница преображалась без перезагрузки в печатный вид. Таким образом и пользователь экономит время(хоть и мизерное), и видит сам печатный вид без лазания по меню броузера. Вроде как - все довольны.

HTML

Для примера понадобится страница с печатной версией, это будет что то вроде этой. В head файла добавим print.css два раза для разных медиа:
  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 />
Атрибут disabled указан для того что бы в ИЕ эти стили корректно включались и отключались.(см. статью)

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

Javascript

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

Потому я обратился к другой статье(спасибо 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.

Ссылки

Для красоты в media=screen я скрываю ссылку переключения в обычный вид, а в печатной версии соответствующую ссылку на печатную версию.

В конце

Вот такой маленький приемчик - иногда может быть довольно приятным, да и наконец позволяет более явно использовать нам наши CSS для принтеров. А то бывает пишешь-пишешь эти стили.. А они скопируют в ворд и распечатают по привычке =) Кстати многие любят читать печатные версии на сайтах, что бы ничего не мешало - а таким образом мы ускоряем им это переключение. Вдобавок, можно давать одинаковые тайтлы нескольким ЦСС файлам и они будут отключены все разом. Буду рад услышать Ваши мысли, критику, приемы по этому поводу!

Обновлено: Спасибо 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.

43 комментариев к “Печатная версия с Javascript”

1.memyself | 07 Apr, 2007
Всё гениальное просто. Спасибо Вам большое!
2.Vladson | 07 Apr, 2007
Только вот благодаря параметру "disabled" жертвуется "валидность"
3.Smash | 07 Apr, 2007
Можно добавить href="#print" и href="#view", и в зависимости от него включать или отключать нужные стили. Это добавит возможность сослатся на печатную версию.
4.Smash | 07 Apr, 2007
Vladson, оберните его в СС или попробуйте disabled="disabled"
5.Vladson | 07 Apr, 2007
Я делал это по другому, просто добавил к первому link id="main_css" и сделал ссылки onclick="document.getElementById('main_css').href = 'css/base.css'" onclick="document.getElementById('main_css').href = 'css/print.css'" Кроссбраузерность вполне нормальная (проверял в IE-5-6-7, мозила-1-2, опера-7-8-9, Konqueror) и валидность не храмает... Советую глянь на http://www.exclipy.com/ там тоже самое но ещё более грамотно...
6.Mourner | 07 Apr, 2007
Хорошо написанная, полезная статья, молодец! Великолепно! Только один момент, который можно улучшить - я (и не только) твёрдо убеждён, что в HTML-маркапе не должно быть вещей, которые не имеют смысла без работающего JS. Поэтому ссылки на печатную версию/обратно нужно генерить и вставлять в DOM динамически вместо того, чтобы прописывать в маркапе (тем более через атрибут onclick).
7.pepelsbey | 07 Apr, 2007
Отличная статья. Даже не верится, что по-русски ;)
8.Amigo | 08 Apr, 2007
спасибо, интересный ход! главное, в лисе работает :)
9.tommy | 08 Apr, 2007
Пример супер, да и сайт тоже. Очень много нового узнал, спасибо Amigo, как по мне так в лисе практически все работает, что нельзя сказать об ие :)
10.akella | 08 Apr, 2007
Спасибо всем! @Vladson, да ты прав - можно и таким способом, спасибо. Но он, ИМХО, какой то чуть менее логичный, то есть мы подменяем а не переключаем. А насчет того линка так там используется как раз Style Switcher который как по мне слишком избыточен для таких задач, ну зачем мне запоминать в куку что он переключился на печатную версию? ) А валидность да.. есть такое, но когда я вставляю этот параметр только ради ИЕ - моя совесть чиста(почти) =), да и CC можно... @Smash: спасибо да идею! Действительно иметь ссылку было бы еще удобней! Главное нам теперь не написать мегафреймворк для работы с печатной версией :) Я уже вижу... Printr.js
11.Vladson | 08 Apr, 2007
>>> какой то чуть менее логичный Я так не считаю, мне кажется что очень даже ничего... Единственное что выполнен он "топорно" (просто чтоб передать смысл) но это решается...
12.akella | 08 Apr, 2007
да, смысл понятен, наверно ППК защищался от каких старожилов-броузеров, где то наверно этот параметр протектед. А не нравится мне в этом методе то что в джаваскрипте учавствует важный контент - адрес ЦСС файла, не хотел бы я вмешивать..Никаких конкретных проблем - просто интуитивно так. В любом другом случае - бесспорно проще. Спасибо большое!
13.Zigzag | 08 Apr, 2007
Юра, пасиб, действительно... гениально просто!
14.wmas | 10 Apr, 2007
Вариантов всегда было много и в этом вся соль на раны или наоборот :) В любом случае – народу нравится, хотя вроде как можно просто display: none или скажем innerHTML нужного кусочка в всплывающем окне выводить :) Тоже варианты в копилку.
15.Vladson | 10 Apr, 2007
>>> споосба еще нуждаются в тестировании Не вижу смысла особо тестировать, дело в том что вроде все перечисленные способы достаточно кросс-браузерные... Мой способ я проверял на винде IE, Firefox Opera, а также на Линуксе под Konqueror, Firefox и Epiphany (Epiphany тоже на Gecko)
16.akella | 10 Apr, 2007
@ Vladson: Под дотестированием я имел ввиду МАК. И пусть доля его мала, но людям которые его имеют как правило лучше все видеть в хорошем свете :) Ну и + в ИЕ всякое бывает.... Без disabled например все работает в ИЕ, но с маленьким глючком - принт стили включаются не с первого раза.
17.Sam | 10 Apr, 2007
Довольно интересный способ. И расписано хорошо. Спасибо за статью.
18.ilya shvets | 10 Apr, 2007
Что-то долго вы его делаете.
19.akella | 11 Apr, 2007
Кого? =)
20.Misha | 14 Apr, 2007
на css проще, как по мне. Но за статью все равно зачот, хороша, впрочем, как и все :)
21.Алексей | 15 Apr, 2007
Изобрели велосипед? Print to Preview -> http://alistapart.com/articles/printtopreview
22.akella | 15 Apr, 2007
Вот спасибо за ссылку - а я пропустил, буду теперь и этот вариант знать ). Но у меня как то попроще кажется..
23.Crash Override | 19 Apr, 2007
Интересно. Надо прикрутить к блогу будет :)
24.JS | 23 Apr, 2007
Здравствуйте! К сожалению, не силен в скриптах. Подскажите, пожалуйста, как надо доработать этот скрипт, чтобы при включении версии для печати для нее выводилась спец. шапка (отличающаяся от основной страницы , например, логотип + текст), а после контента спец. footer, также отличающийся от основной стр. Насколько я понял, надо сделать проверку и, если версия для печати, то: document.write ('текст').?
25.akella | 23 Apr, 2007
В обычном CSS файле скрывайте ваш печатный футер, а в печатном CSS файле скрывайте ваш обычный футер. Добавьте их сразу оба в код.
26.JS | 23 Apr, 2007
Да, этот способ понятен, спасибо. А вот можно ли как раз без этого скрыть/показать? Именно поэтому и зарекся про document.write. Просто не хотелось бы в основном документе держать альтернативные header и footer. Или у этого способа есть какие-то сильные недостатки?
27.akella | 23 Apr, 2007
Серьезные ровно настолько насколько важен альтернативный футер и хедер. Вдруг ЖС отключен, да и как то некошерно хранить в ЖС части контента. Мне кажется оптимально держать по два варианта в коде, или пытаться их как то скомпромиссить - что бы хватало одного который в печатной версии бы становился таким каким надо.
28.Николай | 13 May, 2007
Потрясающая статья. Спасибо.
29.Евгений | 21 May, 2007
в общем-то статья на нужную тему, а про менталитет я говорить не буду, это же банально очень про менталитет-то говорить, мол это только в нашей стране никак догадаться не могут, что страницу можно отправить на печать нажав ctrl+p или аналогичными телодвижениями
30.ogonkov | 31 May, 2007
а можно ещё сделать CSS, где ссылка "Вернуться к стандартному виду" будет скрываться использовать последний способ, где CSS подменяется с указанием адреса и при печати по идее эта ссылка не будет уже отображаться возможно где-то я накосячил в своих рассуждениях, это так, мысли вслух :)
31.VLad | 24 Jun, 2007
Полаконичней, чем на Alistapart будет. Но ИМХО document.all в этом скрипте смысла использовать нет. Я склонен разделять мнение этого товарища - http://simonwillison.net/2003/Aug/11/documentAll/ А что касается диалога Акеллы с Владсоном, то извечный камень преткновения - логика или простота очень редко имеет золотую середину.
32.Vladson | 25 Jun, 2007
>>> что касается диалога Акеллы с Владсоном Что касается диалога то просто мы столкнулись с разными ситуациями, в одних случаях хорошо одно, в других другое. Я рад что было употреблено слово "диалог" а не "спор" так как обе точки зрения правильны. (Далее ИМХО:) Вся прелесть вёрстки заключается в том, что изначально нет правильного и неправильного варианта. Есть множество разных способов, и что именно отличает "мастера" от "новичка" это то что он может выбрать тот или инной способ в зависимости от сложившейся ситуации.... (Как говорится в знаменитой поговорке "Что русскому хорошо, то немцу смерть" или как в юмористическом ремиксе "Что немцу кирпич, то русскому мигающий зелёный")
33.VLad | 01 Jul, 2007
>>> изначально нет правильного и неправильного варианта Глубоко убежден, что есть. Не в приложении к теме обсуждения, а в принципе. И мастера от новичка как раз и отличает умение выбрать правильный вариант, более изящный вариант, более лаконичный вариант. Конечно существуют равнозначные и равновозможные варианты, но там где "этого требует истина":) я привык к категоричности. В качестве простого примера: табличная верстка - это неправильно вне зависимости от ситуации, кто бы что ни говорил по этому поводу. Часто желание написать попроще основывается на неправильном понимании простоты.
34.Flo | 05 Jan, 2008
такой прием не валиден xhtml strict можно как нибудь обойтись без disabled?
35.akella | 05 Jan, 2008
Я не знаю зачем нужен именно стрикт, модно? Поставьте обычный html и используйте, либо пробуйте метод, ссылка на который дана в комментарии номер 21 Валидатор это инструмент кодера, ну вызывает это ошибку... ну и? Вы же о ней знаете, и знаете что она безвредна для всех.
36.Андрей - Практик | 30 Mar, 2008
В 99% случаев страница с "версией для печати" должна иметь другой html код, поэтому даже и мыслей нет заморачиваться с JS. Если и использовать JS, то придётся перед этим сделать html версию и только потом настраивать вторую JS версию. Когда выдаётся сообщение "этот скрипт не работает в вашем броузере" - это непрофессионально!!! Когда "функция отключается" при отсутствии JS - это тоже несерьёзно!
37.akella | 30 Mar, 2008
На моих четырех сайтах, подходит тот же самый HTML. Так как я использую хорощий ХТМЛ, позволяющий сделать с ним все что мне нужно через ЦСС. Убедитесь в этом на этой самой странице. Вы видимо недостаточно хорошо знакомы с HTML+CSS. Таким образом, должно существовать еще 396 сайтов для которых это не так :) Очень сомневаюсь. Предусматривать доступность для пользователей без джаваскрипт безусловно нужно. Но и забывать о том что таких пользователей менее 1 процента, тоже не стоит. Я делал доклад в москве на Сlientside целиком посвященный доступности, видимо вам будет интересно http://cssing.org.ua/2007/11/11/client-side-2007/ Сообщение о том что это не работает в вашем броузере, не самый удачный вариант, но перефразировать его в ваших силах. Более того, в данном случае оно дано, только для того, чтобы вы могли проверить, как разработчик (а этот блог именно для разработчиков) каков результат нажатия. Потому извините :) Ваш комментарий какой-то поверхностный и несерьезный. Жаль что вы не вдумались в суть поста.
38.sonika | 05 Oct, 2008
Спасибо за способ, пристроила себе в блог! Юрий, а не мог бы ты вывести форму поиска в блоге? Искать что-либо очень неудобно...
39.akella | 05 Oct, 2008
Круто! =) Я её спрятал в "архивах". Мало кто искал по статистике =( P.S.: наверное случайно получилось - сейчас у тебя ссылка на печатную версию выводится в листингах статей, а не только на single_post.
40.Морозов | 27 Oct, 2008
Попробовал сделать по-вашему, но при обилии на странице флешевых банеров и разного рода динамики на javascript в момент переключения таблиц стилей IE просто вылетает (демонстрацию, к сожалению, привести не могу). При этом вариант с подменой href у основной таблицы стилей работает.
41.Документ для печати. Версия с Javascript &laquo; uspeshnyy.ru &#8211; Личный блог | 02 Nov, 2010
[...] пойти дальше(спасибо Smash за идею), и позволить пользователям давать ссылку на [...]
42.nadietax | 03 Aug, 2012
Сайт nadietax.com - женский сайт о диетах, здоровом образе жизни, красоте, женском здоровье
43.Charlesjak | 30 Jan, 2021
С Целью независимого производства, сперва необходимо получить трафареты. Во реализации имеется модификации с целью разового применения в самоклеящейся пластинке. Предполагаются наиболее дорогостоящие виды с целью неоднократного использования также извлечения некоторых схожих элементов. Во случае определенного, выдуманного рисунка образец возможно совершить без помощи других. Увлекательный песок овражный в киеве рисунок выносится в крепкую эластичную бумагу, в каком месте вырезается необходимый изображение. Пред основанием деятельность плоскость следует помыть мыльнооперными орудиями, обезводить также потереть обезжиривающим веществом, спиртом либо ацетоном. Окраски правильнее приобретать влагоупорные акриловые. Комфортнее использовать баллончиками, однако возможно украшать также гроздью. Вольные зоны плоскости, для того чтобы исключить попадания в их брызг в период деятельность, закрываются окрасочным скотчем. Шаблон фотографируется со стандартов одновременно ведь уже после просыхания красителя. Системы необходимо посмотреть согласно правилам в упаковке. В Случае Если прибирать образец со влажного покрова, возможно помазать картинка.