Skip to content
This repository has been archived by the owner on Dec 10, 2018. It is now read-only.

1.9 QuickStart

Jump to bottom
klabarge edited this page Jan 18, 2016 · 3 revisions

Compatibility

  • ⛔ 2.0 | ✅ 1.9 | ...

###What is the minimal code needed for QZ Tray?

QZ Tray ships with a sample.html page, our API for using the software. While this page may be great for testing out the software, it may have unnecessary code for your environment.

The sample.html page is a beefy 1164 lines of code. In this tutorial, we will shrink the code down to under 100 lines. This will illustrate the code that is essential to properly load QZ Tray in the browser.

Note: If you are using QZ Print (applet version), please look at Legacy QuickStart instead.

###The Code

  1. In the demo folder of QZ Tray (QZ Tray\demo\js) there are several JavaScript files. Two of these are essential for QZ Tray.
  • jquery-1.10.2.js is needed for the jQuery library
  • qz-websocket.js is needed for deploying WebSockets
   <html>
   <!-- License:  LGPL 2.1 or QZ INDUSTRIES SOURCE CODE LICENSE -->
   <head><title>QZ Print Plugin</title>

   <script type="text/javascript" src="js/3rdparty/jquery-1.10.2.js"></script>
   <script type="text/javascript" src="js/qz-websocket.js"></script>
   <script type="text/javascript">
  1. This next portion of the code is responsible for:
  • Deploying QZ Tray
  • Fetching the trusted certificate
  • Signing print requests using a server-side signing script

Go to our Signing Messages tutorial for an in-depth explanation of these functions.

Note: In the sample.html page, we past the Intermediate Certificate (Public Certificate) directly into this function instead of using the AJAX method. Look here to view the non-AJAX method.

   //Deploys QZ Tray
   deployQZ();
   function getCertificate(callback) {
       $.ajax({
           method: 'GET',
           url: 'assets/auth/digital-certificate.txt',
           async: false,
           success: callback // Data returned from ajax call should be the site certificate
       });
   }
   function signRequest(toSign, callback) {
       /*
       $.ajax({
           method: 'GET',
           contentType: "text/plain",
           url: '/secure/url/for/sign-message.php?request=' + toSign,
           async: false,
           success: callback // Data returned from ajax call should be the signature
       });
       */

       //Send unsigned messages to socket - users will then have to Allow/Deny each print request
       callback();
   }
  1. The following function is also necessary for QZ Tray. qzDonePrinting() must be called after each print request, as the software can only handle one at a time. If this is not done, they will race ahead of each other and cause printing issues.

qzDonePrinting is automatically called after qz.print(), qz.printPS(), qz.printHTML(), and qz.printToFile() are finished.

   /**
    * Automatically gets called when "qz.print()" is finished.
    */
   function qzDonePrinting() {
       // Alert error, if any
       if (qz.getException()) {
           alert('Error printing:\n\n\t' + qz.getException().getLocalizedMessage());
           qz.clearException();
           return;
       }

       // Alert success message
       alert('Successfully sent print data to "' + qz.getPrinter() + '" queue.');
     }
  1. That's it! The rest of the code in the sample.html is either not needed for QZ Tray (used for QZ Print), a prototype function for printing, or HTML5.

If you want to test to see if QZ Tray is properly working, add this function (along with the above code) to a webpage. This should properly list all of your printers.

/***************************************************************************
* Prototype function for listing all printers attached to the system
* Usage:
*    qz.findPrinter('\\{dummy_text\\}');
*    window['qzDoneFinding'] = function() { alert(qz.getPrinters()); };
***************************************************************************/
function findPrinters() {
       // Searches for a locally installed printer with a bogus name
       qz.findPrinter('\\{bogus_printer\\}');
}

// Automatically gets called when "qz.findPrinter()" is finished.
function qzDoneFinding() {
       // Get the CSV listing of attached printers
       var printers = qz.getPrinters().replace(/,/g, '\n');
       alert(printers);
}

</script>
</head>
       <input type="button" onClick="findPrinters()" value="List All Printers">
</body>

</html>
Clone this wiki locally