Исследование решения для печати через браузер

внешний интерфейс

написать впереди

Источник этой статьи должен начаться с экспресс-печати квитанций компании. Недавно меня назначили ответственным за этот контент. Можно сказать, что раньше я ничего не знал о печати, а проблемы, выявляемые печатью, просто новички, анализ проблемы неясен, причину не найти, гадать некуда. . .

Поговорим о передней частиwebДавайте распечатаем схему, которой мы пользуемся, она всегда печаталась самим отделомnpmПакет, пакет не сложный, это браузерwindow.print()Есть две дополнительные функции: автоматическое разбиение на страницы и печать области содержимого для конкретной страницы. Потому что мы знаем, что прямой вызовwindow.print()Можно распечатать только все содержимое веб-страницы.

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

Итак, вот проблема:
1. Является ли принтер неравномерной поддержкой атрибутов стиля?
2. Существует ли набор стандартов реализации печати, которых мы не знаем?
3. Является ли разная степень растяжения и сжатия страницы предварительного просмотра после выбора другой бумаги проблемой для нашего стиля письма?
4, печать различных моделей принтеров будет иметь какое-либо влияние?
5. Растянется ли при печати содержимое страницы?
6. Поддержка печати для единиц?
7. Печать удостоверения личности? Можно ли заранее узнать номер модели принтера?

С этими вопросами Сяобай затеял сумасшедший заряд печати знаний🔋.

Печать связанных знаний

См. эту часть предыдущей статьи Xiaobai:Браузерная печать Знания Грамотность

Исследование текущих решений веб-интерфейсной печати

1. Функция печати контекстного меню браузера.

Это самый простой способ, достаточно нажать на меню печати на странице, но он же и самый проблематичный, в основном не отвечающий потребностям пользователя.

💣 Например:

  1. Разбиение на страницы не может быть точно разделено, и есть риск ввести полустрочные символы;
  2. Формат, напечатанный после изменения размера бумаги, слишком отличается от формата, отображаемого на странице;
  3. Верхний и нижний колонтитулы также необходимо установить из меню и т. д.

Самым большим преимуществом этого решения является то, что вам не нужно делать никакого кода, просто нажмите «Печать».

window.print()
// or
document.execCommand('print')

На самом деле это программный вызов меню функции печати браузера. Точно так же, как при нажатии на меню функции печати, его нельзя точно разделить на страницы, и нельзя установить размер бумаги. Проблема наложения печати еще более невозможна. Однако пользователи могут напрямую щелкнуть кнопку на веб-странице или ссылку для вызова это без перехода в меню.

Следует отметить, что этот метод предусматривает предпечатное и послепечатное событие.onbeforeprint,onafterprint. Некоторые форматы можно повторно отредактировать перед печатью, отправить на печать и обработать обратно после печати.

function .onbeforeprint() {}
function .onafterprint() {
  //放开隐藏的元素
}

На самом деле, многие пользователи печатают таким образом,window.print()Метод не очень удобен для настройки операции печати путем передачи параметров, необходимо прописать в css.

2. Используйтеprint css

использоватьprint css, напишите два набора для страницы, которая будет напечатанаcss, один набор для отображения страницы браузера и один набор для печати на бумаге.

этот методhtmlдокумент, встроенный, связанный с печатьюcssstyle, для управления выводом и печатью html-документов, таких как настройка размера бумаги, вертикального и горизонтального направления бумаги, полей печати, нумерации страниц и т. д.

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

🍒Преимущества:

  1. Этот метод имеет низкую стоимость, не требует загрузки каких-либо плагинов и очень кроссплатформенный;
  2. может подойти90%Выше печатает, но не смею сказать100%;

💣 Недостатки:

  1. print cssПрошло некоторое время с момента их запуска, но, к сожалению, ни один из браузеров производителей не реализовал эти стандарты должным образом, что делает невозможным использование этих стандартов программистами.print cssЗаймитесь реальной разработкой.

ps: Собственно, это схема печати, которую мы сейчас используем, но делаем это плохо.

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

🌟Вывод: Если мы, наконец, воспользуемся этой печатью, нам нужно обратить внимание:

  1. Лучше всего написать стиль печати для каждой печатной бумаги и не использовать исходный стиль, чтобы быть совместимым с обоими;
  2. Используя print css, единицы измерения указаны в абсолютных единицах;
  3. Не используйте плавающее позиционирование;
  4. . . .

✅хайпринт

🌟🌟🌟Вот мы и нашли, что есть применениеprint cssвыполнитьwebбоковая печать бесплатноjsбиблиотека, зависит отjqueryвыполнить. Официальный сайт:Привет print.IO/.

hiprintЭто js-компонент для веб-печати без установки программного обеспечения. служба поддержкиwindows,macOS,linuxсистема, поддержка мобильного терминала,PCконечный браузер,angular,vue,reactи т. д. Предварительный просмотр страниц, печать, простота в эксплуатации, быстрая работа. Интерфейс предварительного просмотраcss+html. Поддержка группировки данных и пакетного предварительного просмотра. генерироватьpdf, картинка удобнее.

🍒Преимущества:

  1. смоглиcoverТеперь наша страница печатает запрос элемента;
  2. Также поддерживается пакетная печать;
  3. мы напишем раньшеhtml + cssспособ написатьjsonШаблоны и данные для печатиjsonПуть;
  4. использует абсолютное позиционирование и абсолютные единицы измерения, которые очень устарелиcss, в принципе ни один принтер не поддержит;
  5. бесплатно;

💣 Недостатки:

  1. нужно представитьjquery;
  2. Пунктов настройки много, но после написания панели на самом деле нормально.

В заключение:hiprintЕго можно использовать и решить текущие проблемы и потребности нашей полиграфии.

3. Экспорт Excel в файл PDF для печати

Эта схема предназначена для экспорта распечатанных данных в виде файлового потока с сервера.excelдокументация илиpdfфайл, а затем откройте файл на клиенте для печати.

🍒Преимущества:

  1. Возможность добиться точной печати;
  2. Наборы также могут быть достигнуты;

💣 Недостатки:

  1. Требует, чтобы клиент установил Excel и последнее программное обеспечение Adobe;
  2. Excel везде может быть перередактирован, что небезопасно;
  3. Это требует сотрудничества сервера, и цена тоже есть;

4.appletСпособ

использоватьappletСпособ, нумерация страниц или точная печать, может быть идеальным, но очевидны и недостатки, которые заключаются в следующем:

  1. УстановитьappletСтоимость огромна. Необходимо загрузить дюжину или около того файлов МБ.
  2. appletОн может быть невелик сам по себе, но работаетappletнужныйjreв общем>10m. Пользователям нужно много терпения, чтобы печатать.
  3. При печати отчета необходимо повторно получать данные с сервера, что неэффективно.
  4. потому чтоappletсхема, обычно используемаяhtmlспособ представления данных при печатиappletДанные для того же билета должны быть получены с сервера, который выглядит как билет, распечатавший текущую страницу, на самом делеappletне будет использовать текущийhtmlданные страницы для печати, но загружать данные на сервер дляappletпечатать. То есть, если печать, она должна быть запрошена дважды, один разhtmlвизуализировать, один раз для печати.
  5. в магазинеjavaИнструменты отчетности класса, как правило, рекомендуютсяappletспособ печати.

PS: я не знаю, как использовать эту технологию.

5. Чистыйactivexконтролирует

Эта схема на самом деле написатьc/s, затем передать<object>Этикетка встраивается в страницу, данные для печати загружаются в элемент управления, а затем распечатываются.

🍒Преимущества: можно добиться высокой точности печати, пагинации, настройки параметров печати и т.д.

💣 Недостатки: Тоже очевидный, встроенныйactivexЭлементы управления сломаныwebприложение в целомhtmlстиль, и такие элементы управления обычно относительно велики, как правило, более 1 м, и загрузка происходит очень медленно.

6. Облегченный -activex-plugin +-dhtml-+-javascript-+ фоновый код (динамический сбор данных)

Облегченный плагин ActiveX: возможность устанавливать параметры печати, такие как предопределенный размер бумаги, установка ориентации печати, поля печати, указание принтера, бесшумная печать и т. д.

Dhtml + javaScript: редактирование расширенного текста, поддержка редактирования формата отображения данных печати и реализация настройки формата.

Фоновый код: он может реализовать динамическое получение данных печати, таких как подключение по протоколу веб-сокета и т. д.

Ниже приведены несколько облегченных подключаемых модулей ActiveX, которые широко используются в отрасли.

  1. Lodop: есть два вида бесплатная и платная, бесплатная имеет водяной знак, а функций, предоставляемых бесплатно, почти достаточно;
  2. jatoolsPrinter: платно.
  3. ScriptX: Он платный и предоставляет несколько бесплатных функций.Бесплатные функции в основном включают настройку полей страницы и т. д. Мы должны использовать бесплатную версию для наших нужд.
  4. PAZU: PAZU действительно бесплатен для личного или коммерческого использования, без ограничений IP или доменного имени. Но вам нужно подать заявку на привязку IP или доменного имени и сайта 4Fang. ? ? ? Однако при подаче заявки должен быть определенный IP-адрес или доменное имя (имя хоста).ПАЗУ привязан к IP или доменному имени.Мы не можем оформить авторизацию, если IP или доменное имя не определены.Кроме того, после выдается авторизация, привязка не может быть изменена. Привязанный IP и доменное имя должны принадлежать конечному пользователю, поэтому сайт приложения конечного пользователя должен быть связан с сайтом 4Fang, иначе PAZU не будет работать корректно, так как не сможет проверить легитимность авторизации (кроме интранет-приложений).

🌟Вывод: Lodop широко используется и предоставляет множество бесплатных функций, таких как нестандартная бумага, поля страницы, пакетная печать и т. д., что требует от клиента взаимодействия с заранее установленным программным обеспечением.

Заключение исследования

Основываясь на исследованиях браузерной печати, мы, наконец, решили использовать библиотеку hiprint js для нашей печати, которая может решить проблемы, с которыми мы сталкиваемся сейчас:

  1. 🍒 Пакетная печать;
  2. 🍒Настраиваемая нумерация страниц;
  3. 🍒Персонализированный печатный контент;
  4. 🍒 Стиль печати для маскировки различий между принтерами;
  5. 🍒 Бесплатно

Хахахахаха. Такой ароматный! ! ! ! !

разбитая оболочка легкой печати 🐣

Сейчас, когда пакет npm идет полным ходом, чтобы облегчить внедрение и использование hiprint в проекте, Xiaobai упаковала на основе hiprint и выпустила уже выпущенный пакет npm easy-print с подробным демо.

🍒🍒адрес github easy-print:easy-print

👏👏👏�Заинтересованные друзья приглашаются в звездочки!!!!

Категории