аватар |

Статьи / 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?
27 ноября 2013 18:55 Как сделать изображения чёрно-белыми и обратно средствами jQuery и CSS?
19 июня 2014 11:00 Эффект лупы или как зумировать изображение на jQuery
17 октября 2013 12:57 Как очистить код вставленный в WISYWIG редактор из MS Word?
16 апреля 2014 17:33 Открыть или скрыть блок при выборе чекбокса jQuery


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