аватар |

Статьи / 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!)
 



Распечатать
Похожие статьи
14 апреля 2014 13:45 Как создать адаптивный (резиновый) дизайн сайта на jQuery?
12 сентября 2014 12:01 Красивое всплывающее окно и кнопки на jQuery, WebUI Popover
16 апреля 2014 17:33 Открыть или скрыть блок при выборе чекбокса jQuery
19 июня 2014 11:00 Эффект лупы или как зумировать изображение на jQuery
07 мая 2014 11:23 Как создать кнопку вверх или вертикальное прокручивание страницы на jQuery?


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