修改打印的.js函数[QZ Tray，WooCommerce POS]

Question

我相信这是一个简单的问题，但我很难理解我在这里错过了什么。跳到底部去问实际的问题。

背景

我是修改一个Wordpress POS插件与QZ托盘工作，以打印收据从POS直接没有打印对话。目前，现有插件中的打印功能如下所示：

function posPrintReceipt(url, gift_receipt) {
    gift_receipt = gift_receipt || false;
    var find = '&';
    var re = new RegExp(find, 'g');

    url = url.replace(re, '&');
    url = url + '&gift_receipt=' + gift_receipt;
    if (wc_pos_params.tabs_management) {
        url = url + '&tab_id=' + jQuery('.woocommerce_order_items_wrapper .tab.active').data('tab_number');
    }
    openModal('modal-printing-receipt');
    if (jQuery('#printable').length)
        jQuery('#printable').html('');

    var newHTML = jQuery('');

    //var container = ;
    newHTML.load(url + '#pos_receipt', function () {
        newHTML.find('title, meta').remove();
        jQuery('#printable').append(newHTML.html());
        if (jQuery('#print_barcode img').length) {
            var src = jQuery('#print_barcode img').attr('src');
            if (src != '') {
                jQuery("").load(function () {
                    window.print();
                    closeModal('modal-printing-receipt');
                    wp.heartbeat.connectNow();
                    if (change_user && typeof APP_auth_show != 'undefined') {
                        APP.user_logout();
                    }
                }).attr('src', src);
            } else {
                window.print();
                closeModal('modal-printing-receipt');
                wp.heartbeat.connectNow();
                if (change_user && typeof APP_auth_show != 'undefined') {
                    APP.user_logout();
                }
            }
        }
        else if (jQuery('#print_receipt_logo').length) {
            var src = jQuery('#print_receipt_logo').attr('src');
            if (src != '') {
                jQuery("").load(function () {
                    window.print();
                    closeModal('modal-printing-receipt');
                    wp.heartbeat.connectNow();
                    if (change_user && typeof APP_auth_show != 'undefined') {
                        APP.user_logout();
                    }
                }).attr('src', src);
            } else {
                window.print();
                closeModal('modal-printing-receipt');
                wp.heartbeat.connectNow();
                if (change_user && typeof APP_auth_show != 'undefined') {
                    APP.user_logout();
                }
            }
        }
        else {
            window.print();
            closeModal('modal-printing-receipt');
            wp.heartbeat.connectNow();
            if (change_user && typeof APP_auth_show != 'undefined') {
                APP.user_logout();
            }
        }
    });
}

您会注意到其中有5个window.print()；命令。我发现了一些成功的办法是，将那些打印命令切换到一个承诺链中，以便与QZ一起使用--就像他们在wiki中所展示的那样。

我为每个window.print()替换的命令如下所示。我们的目标是一次向两台不同的打印机发送两份单独的收据，因此，这条长而又重复的链条：

qz.websocket.connect().then(function() {      // Start of WriteDrive Modification - 1 of 5
   return qz.printers.find("Star");              // Pass the Star printer name into the next Promise
   }).then(function(printer) {
      var config = qz.configs.create(printer);       // Create a default config for the found printer
      var colA = '*  Star HTML Printing  *' +
                                      'Find, Config & Print in 1 Function
' +
                                      'Testing for new POS';
      var colB = '';

      var printData = [
         {
            type: 'html',
            format: 'plain',
            data: '' +
            '   ' +
            '       ' +
            '           ' +
            '           ' +
            '       ' +
            '   ' + colA + '' + colB + '' +
            ''
            }
         ];  // Raw HTML Output
      return qz.print(config, printData);
   }).then(function() {
      return qz.printers.find("Boca");              // Pass the Boca printer name into the next Promise
      }).then(function(printer2) {
         var config = qz.configs.create(printer2);       // Create a default config for the found printer
         var colA = '*  Boca HTML Printing  *' +
            'Find, Config & Print in 1 Function
' +
            'Testing for new POS';
         var colB = '';

         var printTicketData = [
            {
            type: 'html',
            format: 'plain',
            data: '' +
            '   ' +
            '       ' +
            '           ' +
            '           ' +
            '       ' +
            '   ' + colA + '' + colB + '' +
            ''
            }
            ];  // Raw HTML Output
         return qz.print(config, printTicketData);
    }).then(function () {qz.websocket.disconnect()}).catch(function(e) { console.error(e); });

所有这些测试都很好--当将print.window()命令交换到QZ链时，测试html会打印到每台打印机上。

问题

首先，我在这里的设置中感到困惑。从初始的posPrintReceipt函数中，我是否试图打印newHTML变量中的内容？还是别的什么？

第二，我不确定我是否在HTML中正确地布局数据。到目前为止，我主要在其中一个打印链中尝试了以下几种方法：

function(printer) {
   var config = qz.configs.create(printer);       // Create a default config for the found printer

   var printable = newHTML;

   var printData = [
      {
      type: 'html',
      format: 'plain',
      data: '' +
      '   ' +
      '       ' +
      '           ' +
      '       ' +
      '   ' + printable + '' +
      ''
      }
      ];  // Raw HTML Output
   return qz.print(config, printData);

用“可打印”变量交换一些想法。到目前为止，所有的东西在最后的打印中只打印出一行。我在这个变量中加入了其他一些想法：

JSON.stringify(data);  // 'data' is from another function, seems to hold all of the order's data from WooCommerce
jQuery('#printable');
jQuery('#pos_receipt');

在将JQuery对象转换为可打印的HTML时，我是不是缺少了一些简单的东西？或者在QZ托盘printData区域内有一种方法可以简单地从其内部的函数中提取信息？

任何帮助都将不胜感激。谢谢。

Answer 1

首先，我在这里的设置中感到困惑。从初始的posPrintReceipt函数中，我是否试图打印newHTML变量中的内容？还是别的什么？

是的，但是WooCommerce代码似乎将newHTML内容附加到现有页面(如使用window.print();所观察到的那样)，很可能利用了@media print样式表。

不幸的是，QZ在封面下使用JavaFXWebView，(在撰写本文时)无法尊重特殊的@media print样式表。

更糟糕的是，QZ并不真正理解flavor: "plain"的页面来源，所以如果以flavor: "plain"文本(而不是以C13形式提供URL )，所有相关的link、src、标记(例如./style.css)都必须是绝对的。

第三，QZ有非常有限的多页支持，所以如果有什么需要有适当的多页支持，准备有布局问题。这个限制在PDF打印中不存在。

最后，newHTML是一个HTML元素(从技术上讲，它是一个jQuery包装的HTML元素)，因此您必须调用newHTML.html()将其附加到JavaScript字符串变量。

第二，我不确定我是否在HTML中正确地布局数据。到目前为止，我主要在其中一个打印链中尝试了以下内容，到目前为止，在最后打印中只打印出一个[object Object]行

如果使用QZ Tray2.1，它现在一次支持多个打印机和数据对象。这在跟踪此特性的bug报告的单元测试中得到了最好的记录。这将简化承诺链。

除了上面提到的元素与字符串问题以及相对的link|src问题之外，代码似乎是为QZ正确格式化的。