Вывод на печать страницы сайта/блога.

Организовать печать HTML страниц очень просто. Достаточно разместить ссылку вида:
<a href='javascript:window.print(); void 0;'> <img src="адрес_изображения" / >
или
<svg height="100" width="100" onclick="print()"><path d="M4,2h8v2h1V1H3v3h1M0,5v6h3v1l3,3h7v-4h3V5m-3,2v1H12v6H6V12H4V8H3V7m2,1h6v1H5m0,1h6v1H5"></path></svg>
или
<input type="button" value="Печать" onclick="print()"></input>
Её можно расположить вместе с кнопками социальных сетей или в теле сообщения.
Пример:

Ту часть страницы, которую не нужно распечатывать включаем в конструкцию:
<span class="noprint">
.................
</span>

И устанавливаем стиль CSS перед </head>:
<style media='print' type='text/css'>
#navbar-iframe {display: none; height: 0px; visibility: hidden;}
.noprint {display: none;}
body {background:#FFF; color:#000;}
a {text-decoration: underline; color:#00F;}
}
</style>
В данном случае на листе не будет показана Панель навигации (navbar-iframe). Аналогичным образом можно поступить с боковой панелью, счетчиками, баннерами и другими элементами.

Можно стили вынести в отдельный файл
<link rel="stylesheet" media="print" type="text/css" href="/print.css" />

Более углублённо раскрывает тему данная статья.
в f t
наверх ↑

22 комментария:

шеф-повар
Конгениально!
NMitra, очень не хочу пользоваться той схемой, к которой вы привели меня вчера. Она несет с ссобой массу проблем, решаемых, но проблем. В эту тему,скажите реально ли распечатаь только ту часть текста со страницы, которая отформатирована как, например, цитата, или нумерованный список? Или - можно ли каким-либо образом отформатировать какую-то часть текста на странице, и только она будет выводится на принтер? Я ввобще не могу понять этого, никак!
NMitra
Без указания галочки "Расширить шаблоны виджета" запрещаем печать заголовка и футера:

<span class='noprint'>
<header>
......................
</span>
<div class='main-outer'>
<div class='main-cap-top cap-top'>
  <div class='cap-left'/>
  <div class='cap-right'/>
</div>
......................
<span class='noprint'>
<footer>
......................
</footer>
</span>
NMitra
Убираем боковые колонки:

<style media='print' type='text/css'>
#navbar-iframe {display: none; height: 0px; visibility: hidden;}
.noprint {display: none;}
body {background:#FFF; color:#000;}
a {text-decoration: underline; color:#00F;}
}
.column-left-outer{display: none;}
.column-right-outer{display: none;}
.column-center-outer{width:1100px;}
</style>
NMitra
Указав галочку "Расширенные шаблоны виджета", указываем для комментариев:

<b:includable id='comments' var='post'>
<span class='noprint'>
.......................
</span>
</b:includable>
NMitra
Теперь на печать будет выходить только содержание сообщения. Внутри которого на вкладке "Изменить HTML", можно также убрать не нужный для печати материал. На вид и функциональность блога это никак не повлияет.

Согласна, что более удобно было бы, если бы можно было указывать те данные, которые требуются к печати, а не наоборот. Плюс из-за своеобразного кода Blogger приходится клочками убирать материал.
шеф-повар
Nmitra, спасибо огромное, вы помогли мне пройти этот путь до конца. Два дня я провел в незабываемых джунглях!
Резюме: все-таки я пойду первым, сложным путем, буду создавать параллельный блог с текстовой версией.
Мне удалось очистить для печати самую суть, но в итоге получилась фигня, и это заставит меня пожертвовать стилем ради листа для печати, чего я не очень хочу.
Еще раз огромное спасибо!
NMitra
Взгляните:

http://prilozhenie11.blogspot.com/2011/02/quattro-formaggi.html.

См. ссылка "Рецепт печати".

Здесь я не создавала новое сообщение, а убрала лишнее в span class="noprint".

И времени затратила минут 10.
Nyukers
Все так. Надо по шаблону побегать. Все сделал, только вот первая стр чистой выходит, почему - не знаю.(
http://nyukers.blogspot.com
NMitra
Я на печать не вывожу, использую программу PDF24 Editor, которая позволяет сохранить файл при нажатии на значок принтера. В ней первая страница выходит пустой. Текст печатается на следующих четырёх, но он присутствует.
Nyukers
вот почему первая пустая и непонятно.
NMitra
Нужно что-то ещё закрывать. Правда, я не помню уже что именно.
Анонимный
Спасибо :)
NMitra
Рада оказаться полезной :)
Анонимный
Спасибо большое!
Анонимный
Почему при печати ссылки подчеркиваются????
NMitra
Свойства

text-decoration: underline;

можете убрать.
Игорь Пушков
А как отправить на быструю печать?
NMitra
Горячие клавиши

CTRL P
Ctrl Shift P

Или посмотреть настройки браузера. Предполагаю, что в Mozilla Firefox - "Инструменты" - "Настройки" - "Приложения"
Анонимный
Почему он не выводит backgroung?
Как можно сделать, чтобы он выводил background-image?
NMitra
Посмотрите тут
http://stackoverflow.com/questions/5064904/how-to-print-webpage-with-background-image
http://support.microsoft.com/kb/296326
Unknown
Цветную страницу для печати выводит чёрно-белой. Как сделать чтобы страница печаталась с цветными элементами?
NMitra
Не скажу, с подобным вопросом не сталкивалась. Если найдёте решение, напишите, пожалуйста. Тоже интересно.