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

Getting Started

Jump to bottom
Tres Finocchiaro edited this page Jun 5, 2015 · 28 revisions

#Getting Started

This is a tutorial for web developers to add a web applet to your 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 Java through the "Applet" interface that is provided by all major web browsers.

##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 having 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.

image

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

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) {
		// Searches for locally installed printer with specified name
		qz.findPrinter(p.value);
  }

            // Automatically gets called when "qz.findPrinter()" is finished.
	function qzDoneFinding() {
		var printer = qz.getPrinter();
		
		// Alert the printer name to user
		alert(printer !== null ? 'Printer found: "' + printer + 
			'" after searching for "' + p.value + '"' : 'Printer "' + 
			p.value + '" not found.');
	}
    • See also sample.html section findPrinter()

    Note: To select another printer, you can also choose it by index using applet.setPrinter(index);

  2. 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"><br><br>
  1. To test the Find Printer button do the following:

  • Load page in web browser and click "Find Printer"

  • View Java console for output. Look for "INFO: Printer found..."

    In the image below, "XPS" was searched and successfully detected by the script.

    image

Java Console Output:

```
 CacheEntry[file:/C:/Users/Kyle/Desktop/qz/qz-print/dist/qz-print_jnlp.jnlp]: updateAvailable=false,lastModified=Thu Aug 07 14:17:14 EDT 2014,length=1938

CacheEntry[file:/C:/Users/Kyle/Desktop/qz/qz-print/dist/qz-print.jar]: updateAvailable=false,lastModified=Thu Aug 07 14:17:13 EDT 2014,length=111770 May 27, 2015 12:20:42 AM qz.LogIt log INFO: QZ-PRINT 1.8.7 May 27, 2015 12:20:42 AM qz.LogIt log INFO: ===== JAVASCRIPT LISTENER THREAD STARTED ===== May 27, 2015 12:20:42 AM qz.LogIt log INFO: Successfully called JavaScript function setTimeout(qzReady(), 0) May 27, 2015 12:21:02 AM qz.LogIt log INFO: ===== SEARCHING FOR PRINTER ===== May 27, 2015 12:21:03 AM qz.LogIt log INFO: Found 8 attached printers. May 27, 2015 12:21:03 AM qz.LogIt log INFO: Printer specified: \Qxps\E May 27, 2015 12:21:03 AM qz.LogIt log INFO: Printer name match: Microsoft XPS Document Writer May 27, 2015 12:21:03 AM qz.LogIt log INFO: Using best match: Microsoft XPS Document Writer May 27, 2015 12:21:03 AM qz.LogIt log INFO: Successfully called JavaScript function setTimeout(qzDoneFinding(), 0)


***

###Raw Printing / PostScript Printing

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

1. **Raw Printing**

 The [Raw Printing Guide](Raw-Printing) goes over how to do the following with a Raw Printer:

 * Sending Raw Commands (Java / php)
 * Base64 Printing
 * Epson/Citizen ESC/P Printing
 * Advanced Print Spooling
 * Print Special Characters
 * File Printing
 * XML Printing

1. **PostScript Printing**
 
 The [PostScript Printing Guide](PostScript-Printing) goes over how to do the following with a PostScript Printer:

 * Print to a File
 * HTML Printing
 * PDF Printing
 * Printing Images

***

###Serial Communication

1. If you would like to send and receive commands through a serial connection, please read the [Serial Communication](Serial-Communication) tutorial.
Clone this wiki locally