How to print raw ESC/POS commands from Javascript
Product JSPrintManager Published 07/30/2018 Updated 01/15/2019 Author Neodynamic
Overview
Many kind of printers like dot-matrix, impact, kiosk, thermal, inkjet, etc; do internally handle ESC/POS (a.k.a. ESC/P) commands which are processed to produce the output printing. ESC/POS was designed by EPSON and is widely used by many other printer brands mainly on POS (Point Of Sales or Point of Services) scenarios like retail, banking, hospitality, and healthcare.
ESC/POS commands are very simple and the main character you'll find in each command is ESC i.e. ASCII hex 1B. Almost any ESC/POS command will start with the ESC (hex 1B) character although it's not the only one as you'll see in the next sample later. The main advantage of using raw ESC/POS commands for printing instead of using the built-in browser javascript printing (window.print();) is that the printing performance will be way faster; a factor that is key in the aforementioned scenarios. No matter which Web Platform/Framework you use (ASP.NET, PHP, Django, Ruby On Rails (RoR), Express.js, AngularJS/SPA, etc.), you'll be able to use raw printing feature with the help of our JSPrintManager solution that was specially designed for this kind of printing needs.
In this walkthrough, you'll learn how to print raw ESC/POS commands from Javascript directly to the client printer without displaying a print dialog at all. You'll be able to print ESC/POS 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 ESC/POS commands, then you can take advantage of our JSESCPOSBuilder project to generate the ESC/POS commands by writing simple and dev-friendly Javascript code. Please refer to this article How to generate (JSESCPOSBuilder) and print raw ESC/POS commands from JavascriptThe ESC/POS commands that we'll use in this article will print out a simple retail receipt that will look like this:
A Sample Receipt printed from Javascript and created by using ESC/POS commands
How to specify ESC/POS commands in Javascript
ESC/POS commands are composed of a set of simple bytes (from 00 up to FF in hex notation) and most of them always starts with ESC which is byte 1B.
Some commands require additional parameters which have to be expressed in bytes too. For example, the following shows how the ESC/POS command for "emphasized text " is found in the reference manual and how it should be specified in bytes.
- ESC/POS command for: "Emphasized mode selected."
-
From the ESC/POS Reference Manual:
ESC ! 8
-
It must be specified in bytes (HEX notation) as:
\x1B!\x08Notice that ESC needs to be specified as \x1B and the integer parameter value is NOT digit 8 char (hex 38) BUT byte hex 08!!! Be aware of the way you must specify commands & params values as a misunderstanding on this subject might carry unexpected printing results or no printing output at all.
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 ESP/POS commands 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
- Download JSPrintManager.js
- Copy all of these *.js files to the same folder where your html page is located and the add the following script references to your page.
<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(); JSPM.JSPrintManager.WS.onStatusChanged = function () { 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); }); } }; //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 ESP/POS commands for sample label var esc = '\x1B'; //ESC byte in hex notation var newLine = '\x0A'; //LF byte in hex notation var cmds = esc + "@"; //Initializes the printer (ESC @) cmds += esc + '!' + '\x38'; //Emphasized + Double-height + Double-width mode selected (ESC ! (8 + 16 + 32)) 56 dec => 38 hex cmds += 'BEST DEAL STORES'; //text to print cmds += newLine + newLine; cmds += esc + '!' + '\x00'; //Character font A selected (ESC ! 0) cmds += 'COOKIES 5.00'; cmds += newLine; cmds += 'MILK 65 Fl oz 3.78'; cmds += newLine + newLine; cmds += 'SUBTOTAL 8.78'; cmds += newLine; cmds += 'TAX 5% 0.44'; cmds += newLine; cmds += 'TOTAL 9.22'; cmds += newLine; cmds += 'CASH TEND 10.00'; cmds += newLine; cmds += 'CASH DUE 0.78'; cmds += newLine + newLine; cmds += esc + '!' + '\x18'; //Emphasized + Double-height mode selected (ESC ! (16 + 8)) 24 dec => 18 hex cmds += '# ITEMS SOLD 2'; cmds += esc + '!' + '\x00'; //Character font A selected (ESC ! 0) cmds += newLine + newLine; cmds += '11/03/13 19:53:17'; 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 ESC/POS 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.