Javascript печать блока с HTML страницы
При создании очередного сайта столкнулся с задачей печати HTML-страницы. На странице была информация о проекте (коттеджи) и ее нужно было по клику распечатать. Для решения идеально подходит Javascript. Итак, создаем такую структуру:
<div id="print-content">
Содержимое для печати
</div>
Обязательно задаем идентификатор. Содержимое может быть любым. Далее напишем небольшую функцию для печати веб-страницы:
<script>
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>
Ну вот и все. Просто и с душой.
Если браузер не видит CSS стили
Если браузер по той или иной причине не хочет видить CSS, то можно упростить код, удалив пару строк:
<script>
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=0');
WinPrint.document.write('');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('');
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
prtContent.innerHTML=strOldOne;
}
</script>
Для чего вообще эта строка нужна?:
prtContent.innerHTML=strOldOne;
strOldOne = document.getElementById(strid).innerHTML;
Автор так и не ответил на вопрос
на
WinPrint.onload = () => {
WinPrint.print();
}
Спасибо за интересный и полезный совет.
Если закрыть вызванное окно через крестик, то страница сайта блочится, пока не переключишься между вкладками. Поэтому вызов окна для печати получается не лучшим вариантом...
Кстати, на Opera тоже пашет и совершенно без глюков.