Wiki - 1.9 Getting Started



This is a tutorial for web developers to add a plugin to your web page capable of sending raw commands to your printer. This is common for Barcodes, Thermal Printing, Point-Of-Sales (POS), and other commercial/industry purposes.

This is possible by using JavaScript to talk to the QZ Tray or QZ Print software using techniques supported provided by all major web browsers and all major Desktop operating systems.

Note: Legacy versions of the software leveraged NPAPI which is being phased out by many major web browsers. Chrome, Microsoft Edge, and Opera do not support NPAPI, while Firefox plans to remove support by the end of 2016. Due to this and the development of QZ Tray 2.0, we will soon be dropping support for the 1.9 versions of our software. Please see our roadmap for exact end of life dates on our products. More information on 2.0 can be found here.

##Preliminary Steps

This tutorial assumes you have already successfully completed the following tasks:

  1. QZ Tray is installed and is working properly in the web browser

    Legacy Users: If you are not using QZ Tray and have trouble getting qz-print to load properly, follow the tutorial below:

  2. Your printer is connected as a raw print queue on your workstation with the name "zebra" (this can be changed later). Click on the appropriate link below for instructions.

When these two steps have been completed, please move on to the next part of this tutorial.

##The Code

If Java is installed and working properly with the browser, the page display should be gray and not yellow (as shown below). We are now ready to dive into the code behind qz print.


We will be looking at the sample.html file provided with the download. This file provides many sample buttons and features.

Note: To locate sample.html, navigate to the demo folder.

  1. Launch QZ Tray
  2. Advanced
  3. Open File Location
  4. Demo
  5. Alternately, navigate directly to it via:
  • Windows: %PROGRAMFILES%\QZ Tray\demo
  • Mac: /Applications/QZ Tray/demo
  • Linux: /opt/qz-tray/demo

Detecting readiness

  1. Upon load, the function qzReady will be called automatically.
  function qzReady() {
     if (!qz) {
       document['qz'] = document.getElmementById('qz');  // Legacy Applet Usage
     try {
       qz.getVersion(); // Validate communication
     } catch (err) {
       alert("Not working! " + err);

Finding the printer

This sample function can be used for both Raw and PostScript Printing.

qz-print's parameters are set through JavaScript commands.

  1. Insert (or modify) the JavaScript code to search for a printer named "zebra". The printer name can be anything you wish (ie. "Epson", "Citizen", "Generic", "BOCA", etc.).

    function findPrinter(name) {
    function qzDoneFinding() {
       if (qz.getPrinter()) {
          alert("Printer " + qz.getPrinter() + " found.");
       } else {
          alert("Printer foobar not found.");
  1. Use html code for a Detect Printer button using standard HTML input button. This button has already been provided in sample.html.
<input type=button onclick="detectPrinter()" value="Detect Printer"></input>
  1. To test the Find Printer button do the following:

###Raw Printing / PostScript Printing

Depending on what type of printer you have, various functions can be used.

  1. Raw Printing

The Raw Printing Guide goes over how to do the following with a Raw Printer:

  1. PostScript Printing

The PostScript Printing Guide goes over how to do the following with a PostScript Printer:

###Serial Communication

  1. If you would like to send and receive commands through a serial connection, please read the Serial Communication tutorial.
Edit this page