How to print raw TSC TSPL/TSPL2 commands from Javascript
Product JSPrintManager Published 05/14/2025 Updated 05/14/2025 Author Neodynamic
Overview
TSPL (TSC Printer Language) commands are a set of instructions used to control a thermal label printer, enabling the creation of various types of labels and other printed materials. These commands are used to define the layout, text, graphics, and other elements of the label.
Basic TSPL commands for some printing elements include:
- SIZE: Set the size of the label in inch unit.
- PRINT: Prints the label n times/copies.
- TEXT: Prints text on the label, allowing for font selection, size, and position control.
- BARCODE: Prints various types of 1D and 2D barcodes, including their type, size, and position.
- QRCODE: Prints QR codes, allowing for encoding data within a label.
- BITMAP: Prints bitmap images, enabling the inclusion of graphics on labels.
- IMAGE: Another command for printing images, often used in conjunction with the BITMAP command.
TSC TSPL/TSPL2 commands are very simple and text plain! The main advantage of using raw TSC TSPL/TSPL2 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 TSC TSPL/TSPL2 commands from Javascript directly to the client printer without displaying a print dialog at all. You'll be able to print TSC TSPL/TSPL2 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!
The TSC TSPL/TSPL2 commands that we'll use in this article will print out a text and a barcode that will look like this:
A Sample label printed from Javascript and created by using TSC TSPL/TSPL2 commands
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 TSC TSPL/TSPL2 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 TSC TSPL/TSPL2 commands for sample label var lineFeed = "\r\n"; var cmds = ''; cmds += "SIZE 4,1"; cmds += lineFeed; cmds += "GAP 0,0"; cmds += lineFeed; cmds += "DIRECTION 1"; cmds += lineFeed; cmds += "CLS"; cmds += lineFeed; cmds += "TEXT 10,10, \"2\",0,1,1, \"Code 128\""; cmds += lineFeed; cmds += "BARCODE 10,50, \"128\",100,1,0,2,2, \"123456abcd123456\""; cmds += lineFeed; cmds += "PRINT 1"; 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 TSC TSPL/TSPL2 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.