Print Unicode UTF8 Text to Zebra ZPL printer from Javascript

Product JSPrintManager Published 07/28/2018 Updated 07/28/2018 Author

Overview

In this walkthrough, you'll learn how to print Unicode / UTF-8 text to Zebra ZPL printers right from Javascript with the help of our JSPrintManager solution. You'll be able to print Zebra ZPL commands to the Default client printer as well as to any other installed printer at the client machine. This solution works with any popular browser like Chrome, Firefox, IE/Edge & Safari on Windows, Linux, Raspberry Pi and Mac systems!

NOTE

If you don't know how to write ZPL commands, then you can take advantage of our ThermalLabel Web API for Docker to generate the ZPL commands by writing simple and dev-friendly Javascript code. Please refer to this article How to generate and print advanced ZPL commands from Javascript and ThermalLabel Web API

The Zebra ZPL commands that we'll use in this article will print out a simple label that will look like this:

A Sample Label featuring Unicode UTF-8 texts printed from Javascript and created by using Zebra ZPL commands
A Sample Label featuring Unicode UTF-8 texts printed from Javascript and created by using Zebra ZPL commands

NOTE: For a complete ZPL printing sample including text and barcodes, please refer to How to print raw Zebra ZPL commands from Javascript

Requirements

  • Be sure your Zebra ZPL Printer Firmware is version Vx.14.x or later. Print a Configuration Label from your printer to determine which firmware version it has installed. Update it from Zebra website if needed.
  • A font supporting Unicode / UTF-8 must be loaded in the Zebra printer. Zebra provides the free Swiss 721 font supporting Latin, Greek, Cyrillic, Eastern European, Turkish, Arabic, and Hebrew characters. That font will be loaded to non-volatile E: memory of the printer and assigned the name TT0003M_.FNT or TT0003M_.TTF (depending on your printer model). You could send these commands ^XA^WD*:*.FNT*^XZ through our JSPrintManager Online Demo and print a list of installed fonts; or by following these other methods
    What about Chinese, Japanese, Korean and other Asian languages? The same code shown below can be used for printing Chinese, Japanese, Korean as well as any other Asian language as long as your printer has installed a font supporting them! Usually, Zebra printers for Asian market already are shipped with such fonts so be sure you specify that font name instead of the aforementioned TT0003M_.FNT or TT0003M_.TTF

Follow up these steps

  • Be sure you install in your dev machine JSPrintManager (JSPM) (Available for Windows, Linux, Raspberry Pi & Mac)
    This small app must be installed on each client that will print from your website!
  • By using your favorite Web Development IDE or Text Editor, create a new HTML file like index.html
    Copy/paste the following snipped codes:

    HTML Code

    
<div style="text-align:center">
    <h1>Print Unicode UTF-8 Text to Zebra ZPL printers from Javascript</h1>
    <hr />
    <label class="checkbox">
        <input type="checkbox" id="useDefaultPrinter" /> <strong>Print to Default printer</strong>
    </label>
    <p>or...</p>
    <div id="installedPrinters">
        <label for="installedPrinterName">Select an installed Printer:</label>
        <select name="installedPrinterName" id="installedPrinterName"></select>
    </div>
    <br /><br />
    <button type="button" onclick="print();">Print Now...</button>
</div>

    Script References


    



<script src="JSPrintManager.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    Script Code

    
<script>

    //WebSocket settings
    JSPM.JSPrintManager.auto_reconnect = true;
    JSPM.JSPrintManager.start()
			.then(_ => {
				if (jspmWSStatus()) {
				    //get client installed printers
				    JSPM.JSPrintManager.getPrinters().then(function (myPrinters) {
				        var options = '';
				        for (var i = 0; i < myPrinters.length; i++) {
				            options += '<option>' + myPrinters[i] + '</option>';
				        }
				        $('#installedPrinterName').html(options);
				    });
				}
			})
			.catch((e) => {
				alert(e);
			});

    //Check JSPM WebSocket status
    function jspmWSStatus() {
        if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Open)
            return true;
        else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Closed) {
            alert('JSPrintManager (JSPM) is not installed or not running! Download JSPM Client App from https://neodynamic.com/downloads/jspm');
            return false;
        }
        else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Blocked) {
            alert('JSPM has blocked this website!');
            return false;
        }
    }

    //Do printing...
    function print(o) {
        if (jspmWSStatus()) {
            //Create a ClientPrintJob
            var cpj = new JSPM.ClientPrintJob();
            //Set Printer type (Refer to the help, there many of them!)
            if ($('#useDefaultPrinter').prop('checked')) {
                cpj.clientPrinter = new JSPM.DefaultPrinter();
            } else {
                cpj.clientPrinter = new JSPM.InstalledPrinter($('#installedPrinterName').val());
            }
            //Set content to print...
            //Create Zebra ZPL commands for sample label
            var cmds =  "\xef\xbb\xbf"; //UTF8 BOM!
            cmds += "^XA";
            cmds += "^CWZ,E:TT0003M_.FNT^FS";
            cmds += "^FO10,50^CI28^AZN,50,50^FDUNICODE using CI28 UTF-8 encoding^FS";
            cmds += "^FO010,160^CI28^AZN,50,40^FD- Roman: ABCDEFGHIJKLMNOPQRSTUVWXYZ^FS";
            cmds += "^FO010,230^CI28^AZN,50,40^FD- Cyrillic: ЁЂЃЄЅІЇЈЉЊЋЌЎЏАБВГДЕЖЗИЙКЛМН^FS";
            cmds += "^FO010,300^CI28^AZN,50,40^FD- Eastern: ŠŚŤŽŹŁĄŞŻĽľŔÁÂĂÄĹĆÇČÉĘËĚÍÎĎ^FS";
            cmds += "^FO010,370^CI28^AZN,50,40^FD- Greek: ΆΈΉΊΌΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩΪΫ^FS";
            cmds += "^FO010,440^CI28^AZN,50,40^FD- Turkish: ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎĞÑÒÓÔÕÖ×ØÙÚÛÜİŞ^FS";
            cmds += "^PA1,1,1,1^FS"; //^PA command is mandatory for RTL Languages like Arabic & Hebrew
            cmds += "^FO010,510^CI28^AZN,50,40^FD- Arabic: زيبرة  تكنوليجيز اوربا المحدودة^FS";
            cmds += "^PQ1";
            cmds += "^XZ";
            cpj.printerCommands = cmds;
            //Send print job to printer!
            cpj.sendToClient();
        }
    }

</script>
  • That's it! Run your website and test it. Click on Print Now... to print the Unicode UTF-8 Zebra ZPL Commands without print dialog. You can print it to the Default client printer or you can get a list of the installed printers available at the client machine.

    NOTE You can also print directly to any LPT Parallel Port, RS232 Serial Port or IP/Ethernet Printer although these scenarios have not been considered in this article for simplicity. For further details on those scenarios, please contact our tech support.
Try JSPrintManager Online Demo!


Useful? Share it!

Related Articles

  How to print raw Zebra ZPL commands from Javascript
  How to configure RAW printing mode in Windows
  How to configure RAW printing mode in Linux and Raspberry Pi
  How to configure RAW printing mode in macOS and OSX

Need help? Contact Support

We provide best-in-class customer service and support directly from members of our dev team! If we are available when you contact us, you will get a response in few minutes; otherwise the maximum turnaround is 24hs in most cases.