1. Предварительный просмотр jQuery
2. jQuery Print Plugin
3. плагин jQuery printPage
4. jQuery PrintMe
5. jQuery Print Preview плагин
6. Как я могу построить это сам?
7. Завершение всего этого

Эта популярная статья была обновлена ​​в январе 2017 года и отражает текущее состояние плагинов печати jQuery. Комментарии, относящиеся к предыдущей версии статьи, были удалены.

Интересно, что вы можете не знать, что вы можете динамически управлять пользовательским интерфейсом предварительного просмотра на своем сайте. По умолчанию браузер выбирает, что печатать (скорее всего, само окно), однако есть несколько плагинов jQuery, которые дадут вам контроль над тем, что печатается.

Хотя плагины для печати могут быть не самыми захватывающими плагинами, вот некоторые из них, которые вы, возможно, захотите изучить. Мы также коснемся того, как вы можете создать эту функцию самостоятельно, если вы любите приключения.

Примечание: старые браузеры (я смотрю на вас IE8) могут вести себя странно при использовании некоторых из этих плагинов. Однако все современные браузеры обрабатывают предварительный просмотр печати согласованно, поэтому имейте это в виду, если вам нужна полная сопоставимость.

Предварительный просмотр jQuery

Этот небольшой плагин jQuery позволяет открывать новое окно браузера для отображения определенных частей вашего сайта для печати. В отличие от некоторых других плагинов в этом списке, этот плагин напрямую не запускает функции печати браузера, он просто открывает минимальное окно (что идеально, так как теперь вы можете распечатать его напрямую).

Плагин полезен для случаев, когда у вас есть части данных, которые вы хотите напечатать, например, информационную карточку или строку в таблице. Вы можете открыть его в новом окне (предоставив опции конфигурации для плагина), а затем распечатать оттуда. Это гарантирует, что вы печатаете только тот контент, который вам нужен.

Поддержка браузера кажется довольно полной и хорошо работала в моих современных браузерах.

К сожалению, это не на GitHub, так что трудно понять, активно ли это поддерживается. Однако это не должно вас сдерживать. Вы должны посмотреть, работает ли это для вас, а затем использовать его «как есть».

Веб-сайт
демонстрация

jQuery Print Plugin

Не позволяйте уродливой демонстрации обмануть вас. Плагин jQuery Print работает хорошо и предлагает целый ряд настроек, позволяющих настроить ваши потребности в печати. Например, вы можете указать, будет ли всплывающее окно отображаться в текущей вдове (через iFrame), установить время ожидания до отображения печати и разместить содержимое до / после всплывающего окна.

Чтобы начать работу, просто передайте ему объект или селектор jQuery, и плагин сделает все остальное.

Автор выдвинул несколько коммитов в 2016 году для улучшения плагина. Хотя коммитов не так много, похоже, что они будут продолжать расти.

Веб-сайт
Github
демонстрация

плагин jQuery printPage

Давайте будем честны с этим плагином. Это не было обновлено в течение очень долгого времени. Хотя некоторые люди могут сбежать при виде последнего обновления, сделанного 6 лет назад. Другие люди (включая меня) могут видеть, что это простой плагин, который просто работает.

Этот плагин создает небольшое модальное окно с сообщением и изображением, которое загружается непосредственно перед печатью основного браузера. Кажется, он лучше всего работает при использовании тегов привязки, которые указывают на контент, который вы хотите напечатать. Вы можете добавить свой печатный контент на новую страницу, а затем использовать этот плагин, чтобы распечатать его. Если у ваших пользователей не включен JavaScript, он будет просто ссылаться нормально, открывая ваш контент в новом окне (где вы можете просто печатать в обычном режиме)

Github
демонстрация

jQuery PrintMe

Этот плагин так же прост, как и приходит. Все, что вы здесь делаете, это вызываете его для элемента jQuery, который вы хотите напечатать, и он вызывает окно предварительного просмотра печати. Там нет реальных вариантов, чтобы говорить о, и он работает именно так, как вы думаете, будет.

Хотя он не имеет всех опций, которые могут иметь другие плагины. Этот плагин является базовым и прекрасно работает во всех браузерах, в которых я тестировал. Причина, по которой я рекомендую этот, заключается в том, что вы можете посмотреть на его исходный код и посмотреть, как он проходит процесс подготовки предварительного просмотра печати. На самом деле это хорошая отправная точка, если вы хотите решить эту проблему самостоятельно (и добавить дополнительные функции и настройки)

Я не ожидаю поддержки с этим плагином. Используйте это, и если это работает, это здорово! Если нет, вам нужно найти что-то еще (или, при желании, собрать его самостоятельно, как описано ниже)

Веб-сайт
демонстрация

jQuery Print Preview плагин

Последним в списке является плагин jQuery Print Preview. Это сделано для того, чтобы предоставить посетителям предварительный просмотр печатной версии веб-сайта. В отличие от традиционного предварительного просмотра печати, этот плагин содержит все содержимое и стили печати в модальном окне.

В качестве дополнительного бонуса он был выпущен вместе со статьей SitePoint, которую вы можете прочитать здесь: Когда посетители печатают - об этой таблице стилей печати ,

Плагин имеет хорошую поддержку браузера (вплоть до IE6), но, похоже, не предлагает никаких дополнительных настроек. У него также есть куча открытых вопросов, поэтому можно было бы сделать вывод, что он больше не поддерживается активно.

Веб-сайт
демонстрация

Как я могу построить это сам?

Это не так сложно создать такую ​​функциональность самостоятельно. То, что большинство этих плагинов делают за кулисами, это динамическое создание элемента <iframe>, добавление его на страницу (но позиционирование вне экрана с помощью CSS), установка содержимого <iframe>, вызов .Распечатать() на iframe, затем удалите его после небольшой задержки.

Вот как ты это сделаешь.

function openPrintDialogue () {$ ('<iframe>', {name: 'myiframe', class: 'printFrame'}) .appendTo ('body') .contents (). find ('body') .append (`< h1> Наше удивительное предложение </ h1> <img src = 'coupon.png' /> `); . Window.frames [ 'myiframe'] фокус (); window.frames [ 'myiframe'] печати (). setTimeout (() => {$ (". printFrame"). remove ();}, 1000); }; $ ('button'). on ('click', openPrintDialogue);

Вот демо эта техника в действии , Когда вы нажмете кнопку « Распечатать купон» , вы заметите, что в предварительном просмотре отображается только купон и заголовок. Это лучше всего просматривать в браузере, таком как Chrome, который предоставляет вам предварительный просмотр. Если вы пытаетесь сделать это в Firefox, сохраните вывод в формате PDF для просмотра результата.

Если вы хотите узнать больше, у Бена Наделя есть интересный (если не слегка старый) пост / видео по этой технике ,

Завершение всего этого

Индустрия отошла от печати страницы (как часто вы можете сказать, что печатали страницу раньше?), Поэтому неудивительно, что некоторые из этих плагинов начинают стареть.

Однако есть несколько крайних случаев, когда печать страницы / частей страницы имеет смысл. Регистрация событий / печать штрихкодов - это одно, наряду с подтверждением получения / подтверждением покупки.

Если вы создаете веб-сайт / веб-приложение и вам нужно распечатать, вы, вероятно, захотите создать CSS-файл только для печати (см .: Создайте индивидуальную таблицу стилей печати за несколько минут ) и настроить ваши макеты отлично. В качестве альтернативы, или вы могли бы использовать описанный выше подход, чтобы печатать только интересующий вас контент. Оба решения будут работать нормально, но, похоже, тенденция смещается в сторону использования CSS для стилизации вашего профиля печати.

Похожие

Комментарии