Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
5 г. назад

Javascript печать блока с HTML страницы

При создании очередного сайта столкнулся с задачей печати HTML-страницы. На странице была информация о проекте (коттеджи) и ее нужно было по клику распечатать. Для решения идеально подходит Javascript. Итак, создаем такую структуру:

<div id="print-content">
Содержимое для печати
</div>

Обязательно задаем идентификатор. Содержмиое может быть любым. Далее напишем небольшую функцию для печати веб-страницы:

<script language="javascript">
function CallPrint(strid) {
  var prtContent = document.getElementById(strid);
  var prtCSS = '<link rel="stylesheet" href="/templates/css/template.css" type="text/css" />';
  var WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=0');
  WinPrint.document.write('<div id="print" class="contentpane">');
  WinPrint.document.write(prtCSS);
  WinPrint.document.write(prtContent.innerHTML);
  WinPrint.document.write('</div>');
  WinPrint.document.close();
  WinPrint.focus();
  WinPrint.print();
  WinPrint.close();
  prtContent.innerHTML=strOldOne;
}
</script>

И немного поясню. Эта функция откроет новое popup-окно, вызовет функцию печати. После печати автоматически закроет окно. В новое окно передается содержимое блока print-content. Также вызываем стили CSS, чтобы отформатировать содержимое. И, конечно, надо вызывать функцию. Делаем через Javascript функцию onClick:

<a onClick="javascript:CallPrint('print-content');" title="Распечатать проект">Распечатать</a>

Ну вот и все. Просто и с душой.

Материалы:

  1. How to print part of web page?
  2. Open (window)

Комментарии

#игорь25.05.2011 15:17
в опере глюк при нажатии на ссылку "печатать" не выходит страница с контентом для печати Ответить
#PaLyCH26.05.2011 22:08
Одним словом это опера :))) Ответить
#Роберт01.06.2011 10:36
Это не глюк оперы. Нужно заменить:
...
WinPrint.document.write('');
....
на
....
WinPrint.document.write('');
.... Ответить
#tanya11.12.2012 14:05
Роберт, подскажите пожалуйста, в чем разница между 1й и 2й записью?
WinPrint.document.write('');
....
на
....
WinPrint.document.write(''); Ответить
#gurkin408.06.2011 17:49
Спасибо! Отлично работает на любом браузере!
Кстати, на Opera тоже пашет и совершенно без глюков. Ответить
#tanya11.12.2012 14:34
Роберт, подскажите пожалуйста, в чем конкретно разница записей
WinPrint.document.write('');
....
на
....
WinPrint.document.write(''); Ответить
#Роман11.01.2013 23:45
Отличный скрипт, спасибо автору! Скрипт все же кроссбраузерный, проверял и в Опере тоже, работает. От себя могу добавить, что еще надо иметь ввиду, что тот же firefox и осёл могут на ура заблокировать новое окно. Так что все же следует проверять window.open на исполнение, если окно не вышло открыть, он возвратит null. Ответить
#Антон26.07.2013 23:21
В Опере работать НЕ ХОЧЕТ!
Тут Роберт дал совет:

>>Это не глюк оперы. Нужно заменить:
...
WinPrint.document.write('');
....
на
....
WinPrint.document.write('');

Вот только строки одинаковые, замены нет никакой. Что все-таки надо заменить!? HELP! Ответить
#Андрей05.10.2014 00:35
Чувак большое спасибо тебе, очень помог твой способ, до этого пытался применить printElement.min.js не помогало, как в свой проект его вставлял браузер начинает на него ругаться. Ответить
#Дмитрий24.02.2016 01:54
Подскажите, почему не работает в хроме? Ответить
#SataniZ04.07.2016 14:10
У кого не работает в opere и в chrome, попробуйте этот код

function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var prtCSS = '';
var WinPrint = window.open('','','left=50,top=50,width=800,height =640,toolbar=0,scrollbars=1,status=0');

var print = document.createElement("div");
print.className = "contentpane";
print.setAttribute("id", "print");
print.appendChild(prtContent.cloneNode(true));

WinPrint.document.body.appendChild(print);

WinPrint.focus();
WinPrint.print();
WinPrint.close();
}

из минусов, у меня перестало печатать в explorer, но эту проблему можно решить с помощью условных комментариев, т.е. чтобы explorer получал только первый скрипт, а Opera, Firefox и Chrome второй. Ответить
#Олег30.05.2016 14:53
Не работает в хроме и опере Ответить
#SataniZ04.07.2016 14:07
У кого не работает в opere и в chrome, попробуйте этот код

function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var prtCSS = '';
var WinPrint = window.open('','','left=50,top=50,width=800,height =640,toolbar=0,scrollbars=1,status=0');

var print = document.createElement("div");
print.className = "contentpane";
print.setAttribute("id", "print");
print.appendChild(prtContent.cloneNode(true));

WinPrint.document.body.appendChild(print);

WinPrint.focus();
WinPrint.print();
WinPrint.close();
}

из минусов, у меня перестало печатать в explorer, но эту проблему можно решить с помощью условных комментариев, т.е. чтобы explorer получал только первый скрипт, а Opera, Firefox и Chrome второй. Ответить
#Александр27.07.2016 18:04
Проблема в прикрепляемом CSS он его просто не видит поэтому стили и ссылки на картинки надо писать вручную там же
типо того:

WinPrint.document.writeln('');
WinPrint.document.writeln('');
WinPrint.document.writeln('body,td,th,input,label,select{font-size:13px;font-family: "Roboto Condensed", sans-serif;}');
WinPrint.document.writeln('.admin_big_table{ border-spacing:0; border-collapse:collapse; width:100%; table-layout:fixed;}');
WinPrint.document.writeln('.admin_big_table td{}');
WinPrint.document.writeln('.admin_big_table td,th{ padding-left:3px; padding-right:3px; border: 1px solid #ddd; overflow:hidden;vertical-align:middle;}');
WinPrint.document.writeln('.admin_big_table th{ font-weight:bold; padding:5px;border-bottom: 1px solid #ddd; font-size:1.2em; background:#F0F0F0;}');
WinPrint.document.writeln('.admin_big_table .list_link{padding: 0px 5px 0px 10px; cursor:pointer;}');
WinPrint.document.writeln('.admin_big_table .list_link:hover > td{ background-color:#fc0;}');
WinPrint.document.writeln('.admin_big_table .link{background-color:#fc0;}');
WinPrint.document.writeln('.admin_table{ border-spacing:0; border-collapse:collapse; width:100%; table-layout:fixed;}');
WinPrint.document.writeln('.admin_table td{}');
WinPrint.document.writeln('.admin_table td,th{ padding-left:3px; padding-right:3px;overflow:hidden;}');
WinPrint.document.writeln('.admin_table th{ font-weight:bold; padding:5px;border-bottom: 1px solid #ddd; font-size:1.2em; background:#F0F0F0;vertical-align:middle;}');
WinPrint.document.writeln('.admin_table .list_link{padding: 0px 5px 0px 10px; cursor:pointer;}');
WinPrint.document.writeln('.admin_table .list_link:hover > td{ background-color:#fc0;}');
WinPrint.document.writeln('.bg_grey{background: #f5f5f5 none repeat scroll 0 0;}');
WinPrint.document.writeln('.t_left{ text-align:left;}');
WinPrint.document.writeln('.t_right{ text-align:right;}');
WinPrint.document.writeln('.t_center{ text-align:center;}');
WinPrint.document.writeln('.w_150p{ width:150px;}');
WinPrint.document.writeln('');
WinPrint.document.writeln(''); Ответить

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

Наверх