аватар |

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



Распечатать
Похожие статьи
21 января 2014 11:15 Как поменять блоки и другие элементы местами с помощью jQuery?
18 июня 2013 14:12 Создаём всплывающее модальное окно jQuery
07 мая 2014 11:23 Как создать кнопку вверх или вертикальное прокручивание страницы на jQuery?
19 июня 2014 11:00 Эффект лупы или как зумировать изображение на jQuery
12 сентября 2014 12:01 Красивое всплывающее окно и кнопки на jQuery, WebUI Popover


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