QZ Tray output print barcode low quality

Question

i try to print a label using qz tray, my technical specs were :

• React web apps
• Get data from API and then render it as html element, using html2pdf.js convert it as pdf
• Convert the pdf to base64 string and feed it to qz tray
• I can see the html element as well the pdf output. All is good quality.

Problem is, the label output have a CODE128 barcode and when i try to scan it, it's not readable. I have try to scan the pdf one, and it works fine. Have try to tweak the html, html2pdf.js config and qz, but it looks like the output never in a hi-res output.

my qz tray code :

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();
      });
    });
});

Can please someone pointed out, how to adjust the quality in qz tray ? TIA

Answer 1

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

You have three major factors influencing quality.

1. html2pdf
2. qz-tray
3. barcode

---

html2pdf

According to html2pdf's page, it uses html2canvas to render its content:

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

The disadvantage of this approach is you're grabbing content as a raster graphic removing any vector print data. Worse, it's at web-resolution, which is generally 96 dpi.

Fortunately, html2pdf uses html2canvas for it's render, so a better resolution is possible using a custom { scale: ...} option:

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

The scale can be calculated by dividing the target DPI by 96. For example, most printers are 600 dpi, so a scale factor of 6 or 7 will be pretty good.

Another factor that should eventually be considered is the choice of jpeg for image compression. png will often yield higher quality results however, may require a shim.

---

qz-tray

QZ Tray can print PDF, Images, HTML as well as "raw" documents.

The choice to use PDF is interesting here, as QZ Tray can print HTML content directly, but assuming you're certain about using PDF, it's strongly recommended to provide the configuration option { rasterize: false }.

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

This option will prevent QZ Tray from creating yet another raster graphic when printing. Note, since QZ Tray 2.1, this options has been toggled off by default.

---

barcode

The title makes the following claim:

barcode low quality

In order for the barcode to render at the same quality as the above, the barcode must also be rendered at a resolution that will scale. This means, the barcode image should be a size that's comparable to the same scale factor (e.g. 6x).

You can avoid having a large barcode by leveraging a vector barcode instead. Most barcode libraries offer various options (e.g. PNG, SVG, etc). Vector will be using SVG or custom HTML (e.g. divs with background color) which will scale properly with the above utilities. As an example, JsBarcode renders an SVG element to the page, which will scale indefinitely without special size multipliers.

---

Summary

Combined, these above techniques should yield a good quality print. It's worth noting that there are several ways to render HTML to be ready for a printer and that you may be happy using other techniques such as:

• Server-side PDF render which will result in vector graphics (e.g. FPDF, mPDF, DOMPDF, wkhtmltopdf, TCPDF)
  
  --OR--
• Preparing the HTML directly for QZ Tray consumption