Printing shipping and product labels from a web app (ZPL and TSPL, no PDF)
If your web app ships parcels, prices products or tracks stock, sooner or later someone asks: "Can it print the label straight to the Zebra?" The usual first attempt is to generate a PDF and call window.print() . That works badly. The label comes out scaled, shifted or split across two labels, and every PC needs its own driver settings. Label printers have their own languages, and sending those…
When shipping parcels, pricing products or tracking stock, businesses often need to print labels directly to Zebra printers. Generating a PDF and calling window.print() is usually not the best approach, as labels often come out scaled, shifted or split across multiple labels. To achieve reliable label printing, printers have their own languages called ZPL (Zebra Programming Language) and TSPL (TSC/4BARCODE).
These languages are plain text and send the printer the exact data needed to draw the label without any driver rendering or scaling.
Both ZPL and TSPL use dots (printer dots) as the unit of measurement. At 203 dpi, there are 8 dots per millimeter, and at 300 dpi, there are approximately 11.8 dots per millimeter. When designing a label, it is crucial to consider the printer's resolution and adjust the label dimensions accordingly. For example, a 4 x 6 inch label at 203 dpi would be 812 x 1218 dots wide x high, while at 300 dpi, it would be 1200 x 1800 dots.
The ZPL example provided in the source demonstrates how to create a shipping label with various elements such as text, barcodes, and QR codes. The commands in the example are self-explanatory, with each command serving a specific purpose in formatting the label.
TSPL, on the other hand, uses a different set of commands to achieve similar results. For instance, the SIZE and GAP commands define the label's size and the gap between labels, while TEXT and BARCODE commands are used to add text and barcodes to the label. The example also shows how to add a QR code to the label using the QRCODE command.
Common issues that arise when printing labels include incorrect gaps/label length, resulting in blank labels or skipped labels. Calibrating the media sensor once is essential to ensure accurate label printing. Additionally, built-in fonts in ZPL and TSPL have limitations, so for labels requiring non-Latin text, alternative solutions such as installing fonts on the printer or drawing text as an image in the browser and sending it as an image via ZPL ^GFA or TSPL BITMAP are recommended.
To send ZPL or TSPL data from a browser to the printer, several options are available. The vendor's agent, such as Zebra's Browser Print, is a simple solution if all printers are Zebra. However, it does not support other printer types. WebUSB is another option, but it has limitations and is primarily suitable for kiosk environments.
The most flexible solution is creating a small local agent on the PC that listens on a local IP address, accepts the ZPL or TSPL string via a POST request, and writes the bytes to the OS print queue or TCP port 9100 for network printers. This approach allows for greater control and compatibility with various printer types.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
