1

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

  • 反应网络应用程序
  • 从 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

4

1 回答 1

0

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

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

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

html2pdf

根据 html2pdf 的页面，它使用 html2canvas 来呈现其内容：

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

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

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

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

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

最终应该考虑的另一个因素是jpeg图像压缩的选择。 png但是，通常会产生更高质量的结果，可能需要垫片。

qz托盘

QZ Tray 可以打印PDF、图像、HTML以及“原始”文档。

使用 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）

    --或--
  • 直接为 QZ Tray 消费准备 HTML
于 2020-01-15T17:30:48.790 回答