© 2000–2012 NoNaMe
Для вывода на экран и на принтер отчета была выбрана технология замены таблицы стилей — CSS.
Основной плюс в таком исполнении скорость отображения печатного отчета — практически мгновенно,
без перезагрузки страницы, благодаря использованию JavaScript.
Для того что бы задача была реализована подобным путем и не возникло в дальнейшем проблем, все стили CSS должны быть
вынесены в отдельный файл в данном случае это :
style.css — для нормального вывода в рамках существующего дизайна.
print.css — для вывода версии для печати и вывода на принтер. (дальше будет видно, что это не одно и тоже )
первый файл — обычная таблица стилей и представляет интерес только для сравнения изменений.
файл print.css это теже стили (имена стилей), но измененные для вывода на печать т.е
- \"отбеленные\" фоны
— все шрифты черные
— не отображаются картинки
— цветовые решения оформления и \"юзабилити\" заменены другими,
(например в заголовках таблицы вместо зелоного фона используется жирный шрифт)
— выводятся только те формы, которые нужны.
ВАЖНО, ЧТО БЫ ИМЕНА СТИЛЕЙ, КЛАССОВ и ПСЕВДО-КЛАССОВ БЫЛИ СОХРАНЕНЫ!!!
ПРИМЕР
==БЫЛО==
Код:
#normal {
border-left-width: 1px;
border-right-width: 1px;
border-top-style: solid ;
border-top-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #33cc66;
border-top-color: #33cc66;
font-family: \"Tahoma\";
font-size:\"0.7em\";
color: \"000000\"; .....
}
==СТАЛО==
Код:
#normal {
background-color: #ffffff;
border: 1 solid black;
font-family: \"Tahoma\";
font-size:\"0.7em\";
color: \"000000\"; ...
}
--прячем ненужные элементы--
input {display: none;}
#navig {display: none;}
a {display: none;}
#bottom {display: none;}
img {display: none;}
Причем изменять можно не только свойство display, а и visibility;
но свойство visibility, при установке значения hidden,
лишь управляет прозрачностью (браузер элементы выводит на экран — но абсолютно прозрачными).
далее для замены стилей используем функцию (не мое решение, автора не помню):
Код:
function changeCSS(name) {
//где name имя css файла
// обратите внимание — идентификатор коллекции
// \"styleSheets\" чувствителен к регистру:
document.styleSheets[\'css1\'].href = name + \'.css\';
}
ТАБЛИЦА СТИЛЕЙ ОБЯЗАТЕЛЬНО ПОДКЛЮЧАЕТСЯ СЛЕДУЮЩИМ ОБРАЗОМ:
Код:
<link rel=\"styleSheet\" type=\"text/css\" id=\"css1\" title=\"Default\" href=\"style.css\">
функцию вызываем по событию OnClick
Код:
<input type=\"button\" Value=\"Версия для печати\" OnClick=\"chageCSS(\'print\');\">
появляется та же страница, но уже с применением стиля для печати.
Для возврата назад делаем обратную замену стилей создав соответствующую кнопку:
Код:
<input type=\"button\" Value=\"Назад\" OnClick=\"chageCSS(\'style\');\">
, т.к. использование кнопки браузера в данном случае приведет не совсем к тому результату который ожидает пользователь
(страница для печати и страница с дизайном — это один и тот же документ и браузер перенесет нас на предыдущую страницу).
и для вызова диалогового окна принтера так же созданим кнопку — для удобства
Код:
<input type=\"button\" Value=\"Печать\" OnClick=\"print(document);\">
------------------------------------------
но теперь у нас в \"версии для печати\" документа присутствуют кнопки (если мы не забыли их вывести ),
которых не должно быть на печати.
для этого в файле print.css используем разные стили для разных носителей
ПРИМЕР
Код:
*/для экрана*/
@media screen {
body {
background-color: #сссссс;
font-family: \"Tahoma\";
font-size: \"x-small\";
color: #black;
}
}
*/для принтера*/
@media print {
body {
background-color: #ffffff;
font-family: \"Tahoma\";
font-size: \"xx-small\";
color: #black;
}
}
применительно к нашей задаче в стиле для принтера для кнопок ставим {display: none;}.
© 2000–2012 NoNaMe