Printing from Websites part 2

Good Afternoon Developers!  Today I’m continuing my discussion of printing from webpages.  For my first post, see here. 

Another option for networked printers is using HTTP POST to send raw print data directly to the printer.  This can be done in Javascript to print locally from any HTML webpage to most Zebra printers.  It allows greater flexibility to set up things like size, margins, and print darkness printed by the website developers as opposed to users.  The only thing needed from the user is the local printer IP address.  The printer IP could be set up once and saved to minimize end user interaction.

Thankfully with http you can print from a mobile device, smartphone, tablet, or PC.   No drivers are necessary, so Android devices without drivers can use this to print. No one has to install or run any software besides a browser.  All this makes it very flexible to the devices your web app can be run on.

There are several limitations for this mode of printing. One is that you as a developer have to create the label yourself.  Zebra printers primarily use a print language called ZPL.  Normally the driver handles the conversion from document to print language. Another is some of the browser security settings block communicating to the printer. The third limitation is that there is no bi-directional capability.  There is no way to verify if a printer is online or is capable of printing before or after sending a print job.  Use this feature only in situations where it is not critical that the print job gets done, or you can easily reprint if the printer was off or out of paper.  Another limitation with http printing is that the printer must be networked on the same network as the user.  USB and Bluetooth connectivity are not options with this technology.

The easiest way to handle creating a print job is to install the Zebra Driver and set it up for how you want the labels to be printed.  Then take a label design tool like Zebra Designer to create a reusable document format.   If you are printing in a specific application, say shelf labels, most of the time you want the price always in one area of the label, and the UPC in another area.  You can use Zebra Designer to lay this template out.  When you want to print, you just send the basic information of the UPC and price for each label.  This speeds up time to print and ensures the best quality images.  You can also manipulate the ZPL directly as a simple text file.  The Programming Guide has examples of how to do this.  It also explains how to set up printers for Wi-Fi, as well as document formatting.

Don’t worry, most Zebra printers are set up to accept this type of communication by default, so no setup is really necessary.  There are two html documents attached.  One of them is a single page, very basic document showing the exact Javascript needed to print.  The other page, with associated documents, is more complicated, but shows multiple ways of handling printing from a webpage and includes several types of documents to print. 

1. Name badge demo: Shows how to take basic user input and embed it directly in a raw ZPL print string and print it.
2. Type your own ZPL Script: Essentially the same as the other basic html page, take what’s in the textbox and send it as raw data to the printer.
3. Print Configuration Label: Simple string to print status and setup information about the printer
4. Print Zebra Demo labels: Shows how to take document templates residing on a server, send them to the printer to be stored, then read them within javascript and pull out variable fields where user input is needed, and display those fields. When the user has done entering their data, they can then hit a print button to print it.
5. Print Labels from your Computer: Does the same thing as demo #4, but gets the templates from the local user’s PC instead of the server.

For the demos that print formats, there are two different types of formats, standard ZPL, and XML. XML printing is useful if data is already formatted in XML, say from a database.

The files that are in this Zip file are:

1. Basic_HttpPOST.html: A very basic webpage with embedded javascript showing the script to print directly to a Zebra printer.
2. HTTPPost_printing.html: A more advanced webpage with embedded javascript showing several demos.
3. ZCloudDemo.css: A standard css to make the webpage look nice and Zebra-ish.
4. Cloud_Connect.png, Zebra_Tag_Horizontal.png, and icon.ico: images to make the page look nice and Zebra-ish.
5. File_catalog.xml: used by the “Print Zebra Demo labels” functionality to provide a list of zpl files for users to choose from (without a PHP or ASP backend)
6. Test.txt, test2.txt, and herbert2.txt: basic ZPL print format files used by the “Print Zebra Demo labels” demo.

  To try it yourself, simply extract the zip folder anywhere on your computer and double click the HTTPPost_printing.html file.  This will open your favorite internet browser.  You will need to input the IP address of your Zebra printer, then you should be ready to print.  If you are using Chrome or IE10+, the “Print Zebra Demo labels” demo won’t work unless you are running it from IIS.

Edit: If you are having a problem with print-jobs not going through, check the console log.  If you see an error along the lines of "Access-Control-Allow-Origin header not found", please see my post .

Other Articles on this topic:

Printing from Websites part 1

Printing From Websites Part 3

Robin West

ISV Engineer - Zebra Technologies