JavaScript: Send raw text to printer - no server requests/method calls, able to work offline, purely clientside

When printing to a Zebra printer, everything before ^XA and after ^XZ is ignored. The html tags around the zpl don't interfere.

The only thing you must ensure is that you print RAW text to the printer.

Use the build in windows Generic / Text Only driver for your Zebra printer. Instead of the zebra driver.

• The normal zebra driver: renders the print job to a bitmap
  • result: a slow printed image of your zpl code.
• The text only driver: sends the zpl code straight to the printer
  • result: a fast printed sticker, from zpl rendered on the printer

Example on jsfiddle or on gist.run

function printZpl(zpl) {
  var printWindow = window.open();
  printWindow.document.open('text/plain')
  printWindow.document.write(zpl);
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

---

Tested in

• Edge
• Internet Explorer
• Firefox

Not working in:

• Chrome
  • Chrome creates an image before sending it to the printer driver (https://productforums.google.com/forum/#!topic/chrome/GYf6iI42Ug4)

---

Select the Generic / Text Only driver in your printer properties:

Following snippet worked for me on Firefox and IE11, with a little change to printer's properties.

I was using this printer emulator.

In Chrome I get error from emulator when printing from Chrome's Print Dialog. Using system dialog gives error about printing failure from Chrome. CTRL + SHIFT + P(shortcut to skip Chrome dialog) no error and nothing happens. All these errors may be related to emulator, but I don't have real printer to test it.

In Printer's Properties I set following options:

• Begin Print Job : ${
• End Print Job: }$

As you can see in script below ZPL code is wrapped in '${' and '}$'

<script type="text/javascript">
  function openWin() {
    var printWindow = window.open();
    printWindow.document.open('text/plain')
    printWindow.document.write('${^XA^FO50,100^BXN,10,200^FDYourTextHere^FS^XZ}$');
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
  }
</script>
<input type="button" value="Print code" onclick="openWin()" />

JSFiddle

If you want to accomplish this consistently without involving the opening of popups or user prompts, you are going to need an application running on the client PC to act as mediator between your application's javascript and the client's printer.

One popular way of doing this is via a browser plugin (NPAPI). But this approach is quickly becoming obsolete as many browsers have begun to remove NPAPI support entirely (Chrome, Firefox).

Another approach is to develop a small application that runs on your client's PC which listens for websocket connections. Your web application will send the ZPL through a connection to the client's websocket server, which in turn will generate a print job.

A third approach - some printers have an internal IP address that can be sent raw ZPL. If you build your web application so that a user can configure this IP address, it would be an option to send the ZPL to that address. However, this won't work if your users are using printers that don't support this functionality.