аватар Автор: Сергей Касаткин | 06 июня 2014 11:26

Статьи / jQuery /

Как распечатать web-страницу с помощью jQuery?

Довольно часто пользователи и web-разработчики задаются вопросом - Как распечатать определённый блок страницы сайта или отдельную удалённую страницу? Не стоит заново изобретать велосипед, достаточно воспользоваться плагином jQuery Print Page.

Как использовать?


Скрипт, вызов печати при нажатии на кнопку или ссылку с классом printPage

$(".buttonPrint").printPage()


Сама ссылка в href будет содержать в себе url нужной страницы

<a class="buttonPrint" href='iframes/iframe_page1.html'>Печатать определённой страницы</a>


Дополнительные параметры


Они не обязательны, но могут пригодиться:

url: переписывает автоматическое значение url в атрибуте href
attr: изменяет атрибут href, который стоит по умолчанию для получения URL адреса страницы.
message: текст, который будет отображаться до тех пор, пока страница для печати полностью не загрузится.

Пример работы печати страницы jQuery и исходники


Пример прост. Есть главный файл со скриптом и моделью как указана выше. Также есть два других html-файла, которые хотим распечатать с первой страницы, только нажав на ссылку.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>jQuery Print Plugin</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery.printPage.js" type="text/javascript"></script>

  <script>  
  $(document).ready(function() {
    $(".buttonPrint").printPage();
  });
  </script>
    </head>
    <body>
        <h3>Пример:</h3>
        <p>При нажатии на кнопку, будет подгружен iframe и напечатан!</p>
        <p><a class="buttonPrint" href='iframes/iframe_page1.html'>Печатать первой страницы</a></p>
                <p><a class="buttonPrint" href='iframes/iframe_page2.html'>Печатать второй страницы</a></p>
    </body>
</html>


Демонстрация Скачать исходники


Спасибо за внимание! Печатайте без проблем и создания лишних файлов css!)
 



Похожие статьи


Комментарии к статье (vk.com)