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

Question

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

• React Web 应用程序
• 从 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

[...]如何调整qz托盘的质量？

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

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

---

html2pdf

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

html2pdf 使用 html2canvas 和 jsPDF 完全在客户端将任何网页或元素转换为可打印的 PDF。

这种方法的缺点是您将获取内容作为光栅图形删除任何矢量打印数据。更糟糕的是，它是网络分辨率，即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 起，此选项已默认关闭。

---

条形码

标题提出以下声明：

条码质量低

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

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

---

总结

结合起来，上述这些技术应该会产生高质量的打印效果。值得注意的是，有几种方法可以渲染 HTML 以供打印机使用，您可能会很高兴使用其他技术，例如：

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