Создание версии для печати страницы сайта (вариант на JavaScript)

Нет картинки Добавляем на сайт версию для печати, реализованную на javascript
На некоторых сайтах можно найти такую ссылку "Версия для печати". Эта ссылка выводит в облегченную версию материала, предназначенную для распечатки на принтере. Попробуем реализовать подобное при помощи JavaScript.

Для начала, сам скрипт:
Code

<script type="text/javascript" language="javascript"><!--
  function atoprint(aId) {
    var atext = document.getElementById(aId).innerHTML;
    var captext = window.document.title;
    var alink = window.document.location;
    var prwin = open('');
    prwin.document.open();
    prwin.document.writeln('<html><head><title>Версия для печати<\/title><\/head><body text="#000000" bgcolor="#FFFFFF"><div onselectstart="return false;" oncopy="return false;">');
    prwin.document.writeln('<div style="margin-bottom:5px;"><a href="javascript://" onclick="window.print();">Печать<\/a> • <a href="javascript://" onclick="window.close();">Закрыть окно<\/a><\/div><hr>');
    prwin.document.writeln('<h1>'+captext+'<\/h1>');
    prwin.document.writeln(atext);
    prwin.document.writeln('<hr><div style="font-size:8pt;margin-top:20px;">© Портал SzenProgs.ru<\/div>');
    prwin.document.writeln('<div style="font-size:8pt;">Страница материала: '+alink+'<\/div>');
    prwin.document.writeln('<div style="margin-top:5px;"><a href="javascript://" onclick="window.print();">Печать<\/a> • <a href="javascript://" onclick="window.close();">Закрыть окно<\/a><\/div>');
    prwin.document.writeln('<\/div><\/body><\/html>');
  }
  --></script>
Прописываем его в теле HEAD, или выносим в отдельный js файл.

Теперь нужно пометить ту часть материала, которую выведем на печать. Это сделаем при помощи DIV.
Code

  <div id="MessForPrint">Тут текст сообщения для печати...</div>

MessForPrint - это тот id, состав которого будем на печать отправлять.

Теперь сделаем ссылку, по которой будем открывать окно с облегченным текстом.
Code

  <a href="javascript://" onclick="atoprint('MessForPrint');">Версия для печати</a>

В качастве параметра для функции atoprint передаем id div блока. Все, просмотр сделан. Теперь нажав на ссылку "Версия для печати" будет открываться новое окно с облегченным содержанием для печати. Незабудьте заменить копирайт в скрипте на свой, иначе я стану автором Вашего материала

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (6)     Подпишитесь на RSS комментариев к этой статье.

6 комментариев

#277
Сергй говорит:
February 5, 2012 at 01:32 pm
Здравствуйте, подскажите, такой способ подходит к сайтам на Wordpress? И если да, так как я пока совсем не силен в этих делах, то разъясните пожалуйста, в какое место какого файла темы нужно внести "
Тут текст сообщения для печати...
" и чем нужно заменить "MessForPrint"? Заранее спасибо.
#279
Саша Loco говорит:
February 5, 2012 at 09:03 pm

Для WordPress лучше брать плагин WP-Print. Или посмотрите его на офф. сайте wordpress.org

#450
oksana говорит:
May 8, 2012 at 10:48 pm

кто нить знает как можно ее сохранить такую?

Плиз подскажите и вкакая функция сахранения в браузерах или они разные для разных браузеров?

#803
Кирилл говорит:
March 13, 2013 at 03:06 pm

Подскажите пожалуйста, у меня в область для печати попадает форма с input type='text'

Так вот при открытии нового окна input'ы  обнуляются

Подскажите как можно сделать перенос свойства value  в новое окно.


#855
Дмитрий говорит:
April 24, 2013 at 12:50 pm

Чтоб корректно работало во всех браузерах надо вконце поставить 

prwin.document.close();


#1387
Виталий говорит:
June 29, 2015 at 11:43 pm

Это лучший вариант из всех, что мне удалось найти в сети.

Однако остался вопрос: как сделать, чтоб слова "Печать и Закрыть окно" не печатались?