Отдаем на печать конкретный div

рейтинг 1.0 из 5

В этом материале мы поделимся с вами кодом, который дает возможность отправлять на печать конкретный DIV. Распечатать страницу полностью в этом скрипте нельзя, это другое, именно такой сценарий, при котором печатается заданный нами DIV.

Так выглядит код кнопки для печати всей страницы:

Код
 
<a href="#" onclick="window.print()">Распечатать</a>

Теперь перейдем непосредственно к печати DIV-элемента. Существует разные способы. Например, есть способ прописывать отдельные CSS-стили для версий сайта, отдельная версия CSS-файла для печати. Согласитесь, звучит как минимум сложно. В данной же версии мы просто создаем новое окно, в котором присутствует выбранный нами элемент, и при его загрузке запускаем печать страницы. Все эти действия происходят менее чем за секунду, поэтому пользователь сразу увидит окно для распечатки с предпросмотром (в зависимости от браузера):

1. Подключаем библиотеку jQuery (вставить следующий код между <head> и </head>). Если ваш сайт на uCoz, этого не требуется, библиотека уже подключена.

Код
 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>

2. Вставьте код в любом месте на странице:

Код
 
<script type="text/javascript"> 
function PrintElem(elem) 

Popup($(elem).html()); 

function Popup(data) 




var mywindow = window.open('', 'my div', 'height=400,width=600'); 



mywindow.document.write('<html><head><title>my div</title>'); 



mywindow.document.write('</head><body >'); 



mywindow.document.write(data); 



mywindow.document.write('</body></html>'); 



mywindow.document.close(); // necessary for IE >= 10 



mywindow.focus(); // necessary for IE >= 10 



mywindow.print(); 



mywindow.close(); 



return true; 







</script>

3. Содержимое данного DIV будем выводить на печать:

Код
 
<div id="mydiv">Tekst</div>

4. Код кнопки для печати. Вставить между <body> и </body>, где хотите видеть кнопку:

Код
<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />

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


  • Дата: 03.06.2018, 15:35
  • Просмотры: 72
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии
Добавить комментарий