Страница для печати

Нашел тут на просторах сети очень полезный способ сделать версию страницы для печати при помощи media=”print” и media=”screen” которые переключаются Javascript-ом. Вот тут можно посмотреть готовый пример и если заинтересует, то внутри вы найдете подробную инструкцию.

HTML
В head документа вписываем следущие строки для добавления стиля для печати, конечно не забываем создать стилевой файл в котором нужно скрыть все картинки и ненужные блоки, такие как меню и т.д.

<!--Ваш обычный CSS файл-->
<link rel="stylesheet" type="text/css" media="screen,projection" href="site.css" title="screenview" />
<!--Стили для печатной версии-->
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
<!--Это строка для превью ипользуя Javascript-->
<link rel="alternate stylesheet" type="text/css" media="screen,projection" href="print.css" title="printview" disabled="disabled"  />

HTML
Эти две строки и есть переключатели которые нужно вставить в ваш документ. Для того чтобы отображалась только нужная строка, в стилевом файле для печати вам нужно будет скрыть класс switch-media вот таким образом .switch-print {display:none}, а в стилевом файле для обычного просмотра скрыть .switch-media {display:none}.

<p class="switch-media"><a href="#" onclick="setPrintCSS(false)">Версия для просмотра</a></p>
<p class="switch-print"><a href="#print" onclick="setPrintCSS(true)">Версия для печати</a></p>

Javascript
Скрипт переключатель стилей.

<script type="text/javascript"><!--
function setPrintCSS(isPrint) {
	if (document.getElementsByTagName)
		x = document.getElementsByTagName('link');
	else if (document.all)
		x = document.all.tags('link');
	else 	{
		alert('Увы, но этот скрипт не работает в вашем браузере');
		return;
	}

	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;
	}
}
if(document.location.hash=='#print') setPrintCSS(true);
-->
</script>

Похожие записи:

1. Реализация min-width и max-width для IE6
2. Узнаем ширину и высоту всей страницы вместе со скроллингом, а не только её видимой части
3. Редактируем любой сайт в интернете
4. Создание стрелочек у меню без картинок