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


В этом материале мы поделимся с вами кодом, который дает возможность отправлять на печать конкретный 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')" />

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


Комментариев 0
Привет, оставишь комментарий?
Имя:*
E-Mail:


Внимание!

Пожертвование
Мы принимаем WebMoney

R807857153548
Z417987712394
B281910665473
Обновления new
  • Переход направление вверх и вниз на CSS
  • Эффект направление вверх и вниз выпадающего списка, который создан при помощи CSS, где может скрыть информацию и по клику открыть список.

  • Wonde - универсальный бизнес шаблон для uCoz
  • Бесплатный новостной шаблон сайта в стиле минимализма. Хорошее решение для ведения своего блога или портала новостей. Все чисто и аккуратно.&nbs ..

  • Горизонтальный топ пользователей по репутации для uCoz
  • Топ пользователей по репутации как на RootGames.Ru на данный момент, пример можете увидеть в персональной странице пользователя в са ..

  • Переключатель с использованием CSS и JS
  • Думаю многим интересно процесс создания оригинальных переключателей, которые можно увидеть на любом тематическом сайте под функцией.

  • Выпадающее горизонтальное меню с помощью CSS
  • По сути выпадающее меню или навигация представляет собой горизонтальный список разнообразных, но скорей всего тематических запросов под параметр ..

Информация