Создание версии для печати страницы сайта (вариант на 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 блока. Все, просмотр сделан. Теперь нажав на ссылку "Версия для печати" будет открываться новое окно с облегченным содержанием для печати. Незабудьте заменить копирайт в скрипте на свой, иначе я стану автором Вашего материала

Комментарии (3)  

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

#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

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

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

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.