Статья для получения очков знаний [веб-печати]

внешний интерфейс JavaScript Открытый исходный код
Статья для получения очков знаний [веб-печати]

«Эта статья участвовала в мероприятии Haowen Convocation Order, щелкните, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"

предисловие

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

Первый блог:Учебная база Джун ЦзеДобро пожаловать, звезда, давайте учиться вместе! На главной странице блога есть группа по выдуванию воды, отсканируйте код, чтобы присоединиться!

Для многих средних и конечных предприятий сценарии печати по-прежнему очень распространены. На основании того, с чем я столкнулся и сравнил с некоторыми существующими решениями, подытожу волну 😎 (в конце статьи есть версия PPT, нужно оставить сообщение), надеюсь поможет вам, у кого такое же Головная боль. Не говори глупостей, давай поговорим.

1. Браузерная печать

1. Преимущества и недостатки

пройти черезwindow.print() 、document.execCommand('print’) Запустите браузер для печати

Разница между разными браузерами: в Safari и Chrome появится окно предварительного просмотра печати, в FireFox (старая версия) и IE нет предварительного просмотра, но вы можете напрямую выбрать принтер.

Однако, несмотря на то, что печатать напрямую из браузера несложно, возникает много проблем.无法满足Наша полиграфия требует:

  • 1. Вся веб-страница печатается и не может быть распечатана局部内容;
  • 2. Печать не поддерживает настройку分页行为, не поддерживается по умолчанию批量打印;
  • 3. При печати样式有问题, то, что вы видите, не то, что вы получаете;
  • 4. Печать может быть точно идентифицирована样式单位Это абсолютная единица измерения (например, pt, mm, cm), и вы можете получить неожиданные результаты при определении различных принтеров в относительных единицах;

2. А вот и проблема

Как добиться частичной печати? 🤔

(1) внутренний HTML

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

function innerHtmlPrint(){
    // 缓存页面内容
    const bodyHtml = window.document.body.innerHTML;
    // 获取要打印的dom
    const printContentHtml = document.getElementById("print").innerHTML;
    // 替换页面内容
    window.document.body.innerHTML = printContentHtml;
    // 全局打印
    window.print();
    // 还原页面内容
    window.document.body.innerHTML = bodyHtml;
    // 页面事件会丢失，需要刷新
    window.location.reload();
}

(2) фрейм

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

Здесь я извлек частичную печать iframe, используемого в проекте, вы можете использовать его напрямую с npm.vue-iframe-print😎😎😎Плагин с использованием демо

image.pngЕсли вы проект Vue, вам нужно только добавить v-print в dom, который нужно распечатать после установки.Основной принцип реализации следующий (часть стиля опущена):

  • создать iframe
  • Построить iframe docType, информацию о заголовке
  • Получить локальный дом, вставить iframe
  • window.print()
   function onIframePrint(printId) {
      const printContentHtml = document.getElementById("printId").innerHTML;
      const iframe = document.createElement("iframe");
      iframe.setAttribute(
        "style",
        "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
      );
      document.body.appendChild(iframe);
      iframe.contentDocument.write(printContentHtml);
      iframe.contentDocument.close();
      iframe.contentWindow.print();
      document.body.removeChild(iframe);
    },

(3) холст

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

function print() {
  var target = document.getElementsByClassName("right-aside")[0];
  target.style.background = "#FFFFFF";

  html2canvas(target, {
    onrendered:function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;

    //一页pdf显示html页面生成的canvas高度;
    var pageHeight = contentWidth / 592.28 * 841.89;
    //未生成pdf的html页面高度
    var leftHeight = contentHeight;
    //页面偏移
    var position = 0;
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    var imgWidth = 595.28;
    var imgHeight = 592.28/contentWidth * contentHeight;

    var pageData = canvas.toDataURL('image/jpeg', 1.0);

    var pdf = new jsPDF('', 'pt', 'a4');

    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    //当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
    } else {
        while(leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if(leftHeight > 0) {
              pdf.addPage();
            }
        }
    }

    pdf.save("content.pdf");
}
  })
}

Преобразование pdf в изображение будет искажено, а печать будет в определенной степени размытой. 👿

Это тоже решение, которое я давно искал (идеальная реставрация): 😬😬😬

  <object
    type="application/pdf"
    data="./滴滴出行行程报销单A.pdf"
    width="100%"
    height="700"
  ></object>
  
  <embed 
     type="application/pdf" 
     src="./滴滴出行行程报销单A.pdf" 
     width="100%" 
     height="700px"
  />

2. Плагин печати

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

1. Преимущества

  • Мощный, может вызывать нижнюю часть системы, например, получать список системных принтеров, устанавливать принтер по умолчанию и т. д.
  • Возможна печать без предварительного просмотра

2. Недостатки

  • Нужно установить клиент, большинство из них платные
  • Сторонние плагины, отсутствие технической поддержки, проблемы, которые трудно решить (проблемы с версией, проблемы с сертификатами, вызванные обновлением chrome84)
  • Метод локального плагина - это в основном только версия оконной системы.

В настоящее время в нашем проекте используется плагинC-lodop, зарядка, текущее использованиеРегистрационный кодЯ не знаюВОЗсуществуетЭтоПолучилось 🌚.

Если не получается, значит вся печать нашего проекта в принципе бесполезна. В настоящее время кажется, что одна покупка действительна вечно.Не паникуйте🌚

3. Некоторые плагины

Вот несколько плагинов для справки:

  • C-lodop: Мощные функции, но совместимость не очень.Если вы хотите обеспечить четкость, вы не можете писать css3, и вы не можете рисовать закругленную рамку. . . Перед использованием рекомендуется внимательно изучить демо, предоставленное на официальном сайте, принцип этого плагина заключается в том, чтобы встроить кусок js в страницу и общаться с локальным клиентом через веб-сокет.
  • HttpPrinter: Аналогично C-lodop, можно пойти разбираться
  • HiPrint: установка клиента не требуется, но не требуется пакет npm, зависит от jQuery.

4. Сделайте снимок рта 😈😈😈

На самом деле, если у вас есть время, вы можете использовать nw.js и electronic.js, чтобы сделать его самостоятельно.Как вызвать термопринтер для печати чека через чистый интерфейс Nw.js?

3. Стиль печати

1. Сначала посмотрите на базовую модель страницы

2. @медиа печать

可以控制打印时的样式，仅在打印生效，可以实现一些特殊需求。

3. @страница

设置页面大小（A3，A4，A5）、边距（margin）、方向（ auto、landscape、portrait）等。

4. page-break-xxx (фокус)

page-break-before( after ) 用于设置元素前( 后 )的分页行为,可取值:

   * auto默认值。如果必要则在元素前插入分页符。
   * always在元素前插入分页符。
   * avoid避免在元素前插入分页符。
   * left在元素之前足够的分页符，一直到一张空白的左页为止。
   * right在元素之前足够的分页符，一直到一张空白的右页为止。
   * inherit规定应该从父元素继承 page-break-before 属性的设置。

page-break-inside设置元素内部的分页行为。取值如下:

   * auto默认。如果必要则在元素内部插入分页符。
   * avoid避免在元素内部插入分页符。
   * inherit规定应该从父元素继承 page-break-inside 属性的设置。
 
orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。

widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。

В-четвертых, облачная печать (node+ipp)

1. Сначала популяризируйте тип принтера 🤔🤔🤔

(1) Лазерный принтер

Общий офисный принтер, как правило, с обычным материалом печати документа. Лазерным нагревом фиксируйте тонер на бумаге, тем самым достигая печати. Обычно используется тонер, бумага, бумага, обычная бумага, обычно черная и белая печать. Скорость печати Последнее поставляет дешево

(2) точечный матричный принтер

Обычно используется для печати чеков или бумаги, которую необходимо спрессовать для печати. Функция печати достигается за счет прижатия чернил на ленте к бумаге. Обычными расходными материалами являются ленты, а используемая бумага - многолистовая бумага.По сравнению с двумя другими классификационными принтерами игольчатого типа можно сказать, что это ветеран.Это более ранний тип на рынке. Существуют в основном 9-контактные, 24-контактные, 72-контактные, 144-контактные и другие принтеры со стилусом. Его характеристики - относительно ясная, простая структура, зрелая технология, хорошее соотношение цены и качества и низкая стоимость потребления.

(3) Термопринтер

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

(4) Струйный принтер

Обычно используется для печати цветных материалов. Функция печати реализуется путем выброса чернил на бумагу. Обычными расходными материалами являются чернила, а используемая бумага — обычная бумага, на которой обычно можно печатать в цвете. (Есть также расходный материал, то есть чернильные картриджи, и некоторые модели не нуждаются в частой замене)

2. узел + ипп

Сначала разберитесь со следующими двумя понятиями префикса: 🤔🤔🤔

  • Протокол интернет-печати(IPP; Internet Printing Protocol) — это стандартный сетевой протокол для печати в Интернете, который позволяет пользователям выполнять удаленную печать и управлять заданиями на печать через Интернет. Пользователь может управлять различными параметрами, такими как тип бумаги и разрешение, используемое в печатной продукции, через соответствующий интерфейс.

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

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

3. Блок-схема облачной печати

В настоящее время облачная печать нашей группы реализована, но ограничений много, а используемых не так много.Если вам интересно, то можете обратиться к другой статье.Egg + Puppeteer реализует Html в PDF (с открытым исходным кодом)

5. Некоторые мысли

1. Если нет особых требований, рекомендуется использовать window.print()

2. В зависимости от бизнес-требований, если это сетевой принтер и требуется бесшовная печать, вы можете использовать облачную печать node+ipp, что несложно реализовать. 🕵

3. Исходные файлы, предоставляемые серверной частью, не очень требовательны. Вы можете использовать pdfjs для преобразования в холст. Требования относительно высоки.<object>、<embed>Файловый поток, заданный бэкендом загрузки тегов, идеально восстанавливает четкость исходного файла.

4.pdf2htmlEX-плагин, pdf в html, последнее техническое обслуживание 4 года назад, можно попробовать

Я также проверил много информации.В настоящее время ощущение веб-печати все ещеwindow.printЭто более практично, и я не нашел никаких проектов с открытым исходным кодом. Есть ли у кого-нибудь рекомендации?

Vi. Рекомендации:

Семь, PPT, при необходимости можно отправить по электронной почте

Восемь, прошлый обзор

Категории