28 Марта 2011

Javascript печать HTML страницы

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

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

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

<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)
Теги: , , ,
Название классов, идентификаторов и прочих элементов→←Храните мелкие картинки в CSS

Комментарии 

# игорь 25.05.2011 15:17
в опере глюк при нажатии на ссылку "печатать" не выходит страница с контентом для печати Ответить
# PaLyCH 26.05.2011 22:08
Одним словом это опера :))) Ответить
# Роберт 01.06.2011 10:36
Это не глюк оперы. Нужно заменить:
...
WinPrint.document.write('');
....
на
....
WinPrint.document.write('');
.... Ответить
# gurkin4 08.06.2011 17:49
Спасибо! Отлично работает на любом браузере!
Кстати, на Opera тоже пашет и совершенно без глюков. Ответить

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