How to print labels from a web page to Zebra thermal printer

QZ Tray is a cross-browser, cross-platform plugin for sending documents and raw commands to a printer.

Features

  • Print barcodes, receipts and more from the web
  • Works with Zebra, Epson, Citizen, Star, Boca, Dymo and more
  • Compatible with Windows, Mac OS X, and Linux
  • Seamlessly sends commands in EPL, ZPL, FGL, ESC/POS, EPCL, and CPCL
  • Supports direct JPG, PDF, PNG, and HTML printing
  • Simple API
  • Open source (github.com/qzind/tray), LGPL
  • Free and commercial versions available

Installation

  • Install Java 7 or higher from Oracle’s website.
  • Download and install the appropriate version of QZ Tray for your operating system.
  • If you’re using Firefox, see these notes.

See installation guide for more details.

Testing

QZ Tray ships with demo/sample.html file that can be used to test printing from a local machine. To test printing from a website, go to demo.qz.io.

Usage

To print labels from a web page to Zebra thermal printer:

  • In the demo/js folder of QZ Tray there are three JavaScript files that are required to communicate with QZ Tray application – dependencies/rsvp-3.1.0.min.js, dependencies/sha-256.min.js and qz-tray.js.

    Include these JavaScript files in your project as follows:

    
    <script type="text/javascript" src="/lib/qz-tray/rsvp-3.1.0.min.js"></script>
    <script type="text/javascript" src="/lib/qz-tray/sha-256.min.js"></script>
    <script type="text/javascript" src="/lib/qz-tray/qz-tray.js"></script>
    
  • The most simple way to print a label to Zebra thermal printer is shown below.

    
    <script type="text/javascript">
    qz.websocket.connect().then(function() {
       // Pass the printer name into the next Promise
       return qz.printers.find("zebra");
    }).then(function(printer) {
       // Create a default config for the found printer
       var config = qz.configs.create(printer);
    
       // Raw ZPL
       var data = ['^XA^FO50,50^ADN,36,20^FDRAW ZPL EXAMPLE^FS^XZ'];
    
       return qz.print(config, data);
    }).catch(function(e) { console.error(e); });
    </script>
    

One of the drawbacks of the free version is that several confirmation dialogs are shown before printing is started.

You can buy premium version to suppress all warning dialogues and also get email support, help with product integration and troubleshooting.

There is also a way to suppress all warning dialogues with free version. You would need to generate your own key, root and intermediate certificates. See this tutorial for more information.

You Might Also Like

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)