javascript - QZ 托盘输出打印条码质量低

Question

我尝试使用 qz 托盘打印标签，我的技术规范是:

• React 网络应用
• 从API获取数据，然后将其渲染为html元素，使用html2pdf.js将其转换为pdf
• 将 pdf 转换为 base64 字符串并将其送入 qz 托盘
• 我可以看到 html 元素以及 pdf 输出。一切都品质优良。

问题是，标签输出有 CODE128 条形码，当我尝试扫描它时，它不可读。我尝试扫描pdf文件，效果很好。尝试调整 html、html2pdf.js 配置和 qz，但看起来输出从未以高分辨率输出。

我的 qz 托盘代码:

const qzPrinter = qz.printers.find("Wincode C342 (Copy 3)");
const funcUpdateLoading = this.updateLoading;
qzPrinter().then(function(printer) {
  let objPrinter = printer;

  var config = qz.configs.create(objPrinter, {
    margins: { left: 0.1, bottom: 0.1 }
  });

  var source = window.document.getElementById("dummyAwb").innerHTML;
  var opt = {
    margin: [0,0],
    filename: "myfile.pdf",
    image: { type: "jpeg", quality: 1 },
    html2canvas:  { dpi: 192, letterRendering: true },
    jsPDF: { unit: "mm", format: [365, 305], orientation: "portrait" },
    pagebreak: { mode: "avoid-all", before: ".akhirTable" }
  };

  html2pdf()
    .set(opt)
    .from(source)
    .toPdf()
    .output("datauristring")
    .then(function(pdfAsString) {

      let arrStr = pdfAsString.split(",");
      var data = [
        {
          type: "pdf",
          format: "base64",
          data: arrStr[1]
        }
      ];
      qz.print(config, data).then(function() {
        funcUpdateLoading();
      });
    });
});

请问有人可以指出，如何调整qz托盘中的质量吗？ TIA

Answer 1

[...] how to adjust the quality in qz tray?

影响质量的三个主要因素。

1. html2pdf
2. qz 托盘
3. 条形码

<小时/>

html2pdf

根据html2pdf的页面，它使用html2canvas来渲染其内容:

html2pdf converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF.

这种方法的缺点是您将内容作为光栅图形来获取，从而删除了任何矢量打印数据。更糟糕的是，它的网络分辨率为 generally 96 dpi .

幸运的是，html2pdf 使用 html2canvas 进行渲染，因此使用自定义 {scale: ...} 选项可以获得更好的分辨率:

var opt = {
  ... 
  html2canvas:  { scale: 6 },
  ...
};

可以通过将目标 DPI 除以 96 来计算比例。例如，大多数打印机为 600 dpi，因此比例因子为 6 或 7 会非常好。

最终应该考虑的另一个因素是选择jpeg进行图像压缩。然而 png 通常会产生更高质量的结果，may require a shim .

<小时/>

qz-托盘

QZ Tray可打印PDF, Images, HTML以及"raw"文件。

这里选择使用 PDF 很有趣，因为 QZ Tray 可以直接打印 HTML 内容，但假设您确定使用 PDF，强烈建议提供配置选项 { rasterize: false } .

var config = qz.configs.create("Printer Name", { rasterize: "false" });  // use vector rendering

此选项将阻止 QZ Tray 在打印时创建另一个光栅图形。请注意，自 QZ Tray 2.1 起，此选项已默认关闭。

<小时/>

条形码

标题提出以下主张:

barcode low quality

为了使条形码以与上述相同的质量呈现，条形码还必须以可缩放的分辨率呈现。这意味着，条形码图像的大小应与相同比例因子(例如 6x)相当。

您可以通过利用矢量条形码来避免使用大条形码。大多数条形码库提供各种选项(例如 PNG、SVG 等)。 Vector 将使用 SVG 或自定义 HTML(例如具有背景颜色的 div)，它们将通过上述实用程序正确缩放。例如，JsBarcode将 SVG 元素渲染到页面，该元素将无限缩放，无需特殊的大小乘数。

<小时/>

摘要

结合起来，上述这些技术应该会产生良好的打印质量。值得注意的是，有多种方法可以呈现 HTML 以供打印机使用，并且您可能会喜欢使用其他技术，例如:

• 服务器端 PDF 渲染，将生成矢量图形(例如 FPDF、mPDF、DOMPDF、wkhtmltopdf, TCPDF)
  
  --或--
• 准备 HTML directly for QZ Tray consumption