ASP.NET Client-side cross-browser barcode thermal label printing with ThermalLabel SDK

Product ThermalLabel SDK for .NET Published 05/30/2012 Updated 02/25/2021

The following guide provides you details about how to print barcode label in an ASP.NET scenario to thermal printers installed in the client side machine using Neodynamic ThermalLabel SDK

Overview

A common request from our customers is like follows. They have created an ASP.NET website and they want to allow their users to print barcode thermal labels to their local /client-side thermal printers. The request goes to the point that some of them, do not want to show any print dialog to the user but just directly print to the default printer without any intervention.

Considering all these needs, we are shipping with ThermalLabel SDK a new printing approach for such scenarios. The solution we provide mainly involves the new WebPrintJob class of our SDK as well as the new TLClientPrint utility. It's interesting to note that this new approach is a cross-browser solution (it works with these min browser versions: Internet Explorer 6.0+, Firefox 2.0+, Chrome 11+, Opera 9.0+ and Safari 3.0+) on Windows OS. The software requirements for the server and client sides are the following:

Server-side Requirements:

  ASP.NET 4.6.1+ or ASP.NET CORE 2.0+
  jQuery 1.4.1+
  ThermalLabel SDK 8.0+

Client-side Requirements:

  Internet Browser (minimum versions are: Internet Explorer 6.0, Firefox 2.0, Chrome 11, Opera 9.0 and Safari 3.0)
  TLClientPrint Utility. This software requires .NET Framework 4.6.1+
  A Zebra ZPL/EPL compatible thermal printer
  A Honeywell-Intermec (Fingerprint) compatible thermal printer

The client side printing approach works as shown in the following figure:

ASP.NET Client-side cross-browser barcode thermal label printing with ThermalLabel SDK

1. You code your website to create WebPrintJob objects based on your business needs. That WebPrintJob can be created in an HTTP Generic Handler (ASHX) or in a MVC Controller. A WebPrintJob object contains info about the ThermalLabel object (that's the layout of the label containing text, shapes, pictures, barcodes, etc), the number of copies to be printed and the client printer settings (or you can display a print dialog and let the user to specify the printer settings). When the user requests your ASPX Page or MVC View, you provide him with a button or link (it would be the "print label" action) which when clicked by the user, it will launch the TLClientPrint utility (which must be previously installed in the client machine).

2. Then the TLClientPrint utility will request your ASHX Handler or your MVC Controller, the one you wrote to create and return the WebPrintJob object. Your ASHX Handler or MVC Controller will return a WebPrintJob object back to the utility, then it will process the WebPrintJob locally in the client machine using a local copy of the ThermalLabel SDK dll (which is automatically installed with the TLClientPrint)

3. The TLClientPrint utility will pass all that info to the ThermalLabel SDK which in turn will generate and send the printer commands to the specified printer (*). It is important to note that the whole job is done at the client-side, freeing the server resources and taking advantages of the processing power of the client machine!

(*) A WebPrintJob contains info about the target client printer. You have many options in this regard. For example:
  • You can already send all the client printer info through the WebPrinterJob's PrinterSettings property. Of course, you need to know many aspects of the client printer like the communication type (USB, Serial, Parallel or Network printer), the name or other related info like IP/Port, if it is Zebra ZPL or EPL capable or a Honeywell-Intermec printer, etc. In some enterprise scenarios this could be easy or manageable as there could be a set of identical printers in most client locations. In other scenarios, you could request the user to provide his printer info once, and then you could store such info somewhere and use it afterward.
  • You can also instruct the TLClientPrint utility to directly print to the default printer in the client machine. In this case you must be sure the client has the correct thermal printer set as the "default printer" but keep in mind that you still will need to specify if Zebra ZPL or EPL, or Honeywell-Intermec Fingerprint commands need to be generated as well as the DPI value supported by the client printer.
  • You can also create a custom Print Dialog form (using Visual Studio and your preferred .NET language like VB or C#) and plug in it with the TLClientPrint utility. By specifying the ShowPrintDialog property to the WebPrintJob object, the TLClientPrint utility will display your Print Dialog form to the client and he will be able to specify the needed info for his printer. By default, the TLClientPrint utility comes with a standard print dialog but you can create your own custom print dialog!

Sample code

The following sample demos how to use the new WebPrintJob class and the TLClientPrint utility. We'll create a simple ASP.NET website featuring a page with a button. Such button will start the client side printing process by invoking the TLClientPrint utility which must be previously installed in the client machine. We'll show the user the default Print Dialog to print a simple thermal label which features a text and a Code 128 barcode.

Follow these steps:

  • Please download and install ThermalLabel SDK if you don't have it already installed in your dev machine.
  • Ensure the Client Machine has the TLClientPrint utility installed. You could provide the user with a link to download and install the TLClientPrint utility. NOTE: You need to install it in your own dev machine too if you want to test it locally. The TLClientPrint utility is located in the installation folder of ThermalLabel SDK, usually under C:\Program Files (x86)\Neodynamic\ThermalLabel SDK\vN.0\TLClientPrint\Installer
  • Open Visual Studio and create a new ASP.NET MVC website.
  • In the ASP.NET project, add a reference to Neodynamic.SDK.ThermalLabel.dll and Neodynamic.SDK.ThermalLabel.WebPrinting.dll which are located in the installation folder of the product.
  • Now, we'll code our website. Remember it is a simple page with a button that when clicked by the user, it will start the client side printing process.
    • The javascript code
      Our client print solution uses basic javascript code from jQuery framework. You can use a local copy of jQuery (1.4.1+) or use any of the CDN services hosting jQuery. In our case, will choose the Google Ajax API CDN and reference it in our View file.

    • Add to your project a new Javascript file, name it TLClientPrint.js and paste the following code: 

      
/*
* ThermalLabel Client Print Utility
* part of ThermalLabel SDK
* https://www.neodynamic.com/
* Copyright (c) 2018 - Neodynamic SRL
*/
 
$(document).ready(function () {
    if( window.chrome ) {
	  $('body').append('<a id="tlprint"></a>');
	} else {
	  $('<iframe />', {
        name: 'tlprint',
        id: 'tlprint',
        width: '1',
        height: '1',
        style: 'visibility:hidden;position:absolute'
		}).appendTo('body');
	}  
})
 
function printThermalLabel() {
    var webPrintJobUrl = $(location).attr('protocol') + "//" + $(location).attr('host') + "/GetWebPrintJob";
    if( window.chrome ) {
		$('#tlprint').attr('href', 'tlprint:' + webPrintJobUrl);
		var a = $('a#tlprint')[0];
		var evObj = document.createEvent('MouseEvents');
		evObj.initEvent( 'click', true, true );
		a.dispatchEvent(evObj);
	} else { 
		$("#tlprint").attr("src", "tlprint:" + webPrintJobUrl);
	}
}
      This code features the printThermalLabel() function which will be invoked by the button on the aspx page to start the client printing process.

    • The GetWebPrintJob Controller
      Add a new Controller and name it GetWebPrintJob. In this controller, we'll generate a WebPrintJob to print a simple thermal label (with a text and a Code 128 barcode) and instructing the TLClientPrint utility to display the default print dialog to the user. Copy/Paste the following code: 

      
using Neodynamic.SDK.Printing;

public class GetWebPrintJobController : Controller
{

    [AllowAnonymous]
    public void Index()
    {
        //Create a WebPrintJob obj 
        WebPrintJob webPj = new WebPrintJob();
 
        //set a ThermalLabel obj 
        webPj.ThermalLabel = GenerateBasicThermalLabel();
 
        //display print dialog to the client  
        webPj.ShowPrintDialog = true;
        
        //Serialize WebPrintJob and send it back to the client
        //so it can be processed by the TLClientPrint utility
        HttpContext.Response.ContentType = "text/plain";
        HttpContext.Response.Write(webPj.ToString());
        HttpContext.Response.Flush();
        HttpContext.Response.End();
        
    }

    private ThermalLabel GenerateBasicThermalLabel()
    {
        //Define a ThermalLabel object and set unit to inch and label size
        ThermalLabel tLabel = new ThermalLabel(Neodynamic.SDK.Printing.UnitType.Inch, 4, 3);
        tLabel.GapLength = 0.2;
 
        //Define a TextItem object
        TextItem txtItem = new TextItem(0.2, 0.2, 2.5, 0.5, "Thermal Label Test");
 
        //Define a BarcodeItem object
        BarcodeItem bcItem = new BarcodeItem(0.2, 1, 2, 1, BarcodeSymbology.Code128, "ABC 12345");
        //Set bars height to .75inch
        bcItem.BarHeight = 0.75;
        //Set bars width to 0.0104inch
        bcItem.BarWidth = 0.0104;
 
        //Add items to ThermalLabel object...
        tLabel.Items.Add(txtItem);
        tLabel.Items.Add(bcItem);
 
 
        return tLabel;
    }
}
    • The View code
      Open the default View and paste the following markup: 

      
<div>
<h1>ThermalLabel SDK Client Print Samples</h1><br />
<input type="button" value="Print Basic Label..." onclick="javascript:printThermalLabel()" />
<br />
<br />
<cite>Remember that the client must install the TLClientPrint Utility first!</cite>
</div>
                                
@section scripts {
    <script src="~/scripts/TLClientPrint.js" type="text/javascript"></script>
}
      Notice that in the View we have:
      • A reference to the local TLClientPrint.js file. Be sure that the project is referencing jQuery script too!
      • A simple HTML button invoking the printThermalLabel() function we defined in the TLClientPrint.js file
  • Please download and install ThermalLabel SDK if you don't have it already installed in your dev machine.
  • Ensure the Client Machine has the TLClientPrint utility installed. You could provide the user with a link to download and install the TLClientPrint utility. NOTE: You need to install it in your own dev machine too if you want to test it locally. The TLClientPrint utility is located in the installation folder of ThermalLabel SDK, usually under C:\Program Files (x86)\Neodynamic\ThermalLabel SDK\vN.0\TLClientPrint\Installer
  • Open Visual Studio and create a new ASP.NET MVC website.
  • In the ASP.NET project, add a reference to Neodynamic.SDK.ThermalLabel.dll and Neodynamic.SDK.ThermalLabel.WebPrinting.dll which are located in the installation folder of the product.
  • Now, we'll code our website. Remember it is a simple page with a button that when clicked by the user, it will start the client side printing process.
    • The javascript code
      Our client print solution uses basic javascript code from jQuery framework. You can use a local copy of jQuery (1.4.1+) or use any of the CDN services hosting jQuery. In our case, will choose the Google Ajax API CDN and reference it in our View file.

    • Add to your project a new Javascript file, name it TLClientPrint.js and paste the following code: 

      
/*
* ThermalLabel Client Print Utility
* part of ThermalLabel SDK
* https://www.neodynamic.com/
* Copyright (c) 2018 - Neodynamic SRL
*/
 
$(document).ready(function () {
    if( window.chrome ) {
	  $('body').append('<a id="tlprint"></a>');
	} else {
	  $('<iframe />', {
        name: 'tlprint',
        id: 'tlprint',
        width: '1',
        height: '1',
        style: 'visibility:hidden;position:absolute'
		}).appendTo('body');
	}  
})
 
function printThermalLabel() {
    var webPrintJobUrl = $(location).attr('protocol') + "//" + $(location).attr('host') + "/GetWebPrintJob";
    if( window.chrome ) {
		$('#tlprint').attr('href', 'tlprint:' + webPrintJobUrl);
		var a = $('a#tlprint')[0];
		var evObj = document.createEvent('MouseEvents');
		evObj.initEvent( 'click', true, true );
		a.dispatchEvent(evObj);
	} else { 
		$("#tlprint").attr("src", "tlprint:" + webPrintJobUrl);
	}
}
      This code features the printThermalLabel() function which will be invoked by the button on the aspx page to start the client printing process.

    • The GetWebPrintJob Controller
      Add a new Controller and name it GetWebPrintJob. In this controller, we'll generate a WebPrintJob to print a simple thermal label (with a text and a Code 128 barcode) and instructing the TLClientPrint utility to display the default print dialog to the user. Copy/Paste the following code: 

      
Imports Neodynamic.SDK.Web

Namespace Controllers
    Public Class GetWebPrintJobController
        Inherits Controller

        <AllowAnonymous>
        Public Sub ProcessRequest()
            'Create a WebPrintJob obj 
            Dim webPj As New WebPrintJob()
 
            'set a ThermalLabel obj 
            webPj.ThermalLabel = GenerateBasicThermalLabel()
 
            'display print dialog to the client
            webPj.ShowPrintDialog = True
            
            'Serialize WebPrintJob and send it back to the client
            'so it can be processed by the TLClientPrint utility
            HttpContext.Response.ContentType = "text/plain"
            HttpContext.Response.Write(webPj.ToString())
            HttpContext.Response.Flush()
            HttpContext.Response.End()
        End Sub

        Private Function GenerateBasicThermalLabel() As ThermalLabel
 
            'Define a ThermalLabel object and set unit to inch and label size
            Dim tLabel As New ThermalLabel(UnitType.Inch, 4, 3)
            tLabel.GapLength = 0.2
            'Define a TextItem object
            Dim txtItem As New TextItem(0.2, 0.2, 2.5, 0.5, "Thermal Label Test")
            'Define a BarcodeItem object
            Dim bcItem As New BarcodeItem(0.2, 1, 2, 1, BarcodeSymbology.Code128, "ABC 12345")
            'Set bars height to .75inch
            bcItem.BarHeight = 0.75
            'Set bars width to 0.0104inch
            bcItem.BarWidth = 0.0104
            'Add items to ThermalLabel object...
            tLabel.Items.Add(txtItem)
            tLabel.Items.Add(bcItem)
 
            Return tLabel
 
        End Function

    End Class
End Namespace
    • The View code
      Open the default View and paste the following markup: 

      
<div>
<h1>ThermalLabel SDK Client Print Samples</h1><br />
<input type="button" value="Print Basic Label..." onclick="javascript:printThermalLabel()" />
<br />
<br />
<cite>Remember that the client must install the TLClientPrint Utility first!</cite>
</div>
                                
@section scripts {
    <script src="~/scripts/TLClientPrint.js" type="text/javascript"></script>
}
      Notice that in the View we have:
      • A reference to the local TLClientPrint.js file. Be sure that the project is referencing jQuery script too!
      • A simple HTML button invoking the printThermalLabel() function we defined in the TLClientPrint.js file
  • Please download and install ThermalLabel SDK if you don't have it already installed in your dev machine.
  • Ensure the Client Machine has the TLClientPrint utility installed. You could provide the user with a link to download and install the TLClientPrint utility. NOTE: You need to install it in your own dev machine too if you want to test it locally. The TLClientPrint utility is located in the installation folder of ThermalLabel SDK, usually under C:\Program Files (x86)\Neodynamic\ThermalLabel SDK\vN.0\TLClientPrint\Installer
  • Open Visual Studio (and create a new ASP.NET (4.6.1+) website. Name it as WebSiteThermalLabelPrintSample
  • In the ASP.NET project, add a reference to Neodynamic.SDK.ThermalLabel.dll and Neodynamic.SDK.ThermalLabel.WebPrinting.dll which are located in the installation folder of the product.
  • Now, we'll code our website. Remember it is a simple page with a button that when clicked by the user, it will start the client side printing process.
    • The javascript code
      Our client print solution uses basic javascript code from jQuery framework. You can use a local copy of jQuery (1.4.1+) or use any of the CDN services hosting jQuery. In our case, will choose the Google Ajax API CDN and reference it in our aspx page. (You can see it in the Default.aspx markup later in this guide)

    • Add to your project a new Javascript file, name it TLClientPrint.js and paste the following code: 

      
/*
* ThermalLabel Client Print Utility
* part of ThermalLabel SDK
* https://www.neodynamic.com/
* Copyright (c) 2018 - Neodynamic SRL
*/
 
$(document).ready(function () {
    if( window.chrome ) {
	  $('body').append('<a id="tlprint"></a>');
	} else {
	  $('<iframe />', {
        name: 'tlprint',
        id: 'tlprint',
        width: '1',
        height: '1',
        style: 'visibility:hidden;position:absolute'
		}).appendTo('body');
	}  
})
 
function printThermalLabel() {
    var webPrintJobUrl = $(location).attr('protocol') + "//" + $(location).attr('host') + "/GetWebPrintJob.ashx";
    if( window.chrome ) {
		$('#tlprint').attr('href', 'tlprint:' + webPrintJobUrl);
		var a = $('a#tlprint')[0];
		var evObj = document.createEvent('MouseEvents');
		evObj.initEvent( 'click', true, true );
		a.dispatchEvent(evObj);
	} else { 
		$("#tlprint").attr("src", "tlprint:" + webPrintJobUrl);
	}
}
      This code features the printThermalLabel() function which will be invoked by the button on the aspx page to start the client printing process.

    • The HTTP Handler for creating the WebPrintJob
      Add a new HTTP Generic Hanlder (*.ashx) and name it GetWebPrintJob.ashx. In this file, we'll generate a WebPrintJob to print a simple thermal label (with a text and a Code 128 barcode) and instructing the TLClientPrint utility to display the default print dialog to the user. Copy/Paste the following code: 

      
using Neodynamic.SDK.Printing;

public class GetWebPrintJob : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        
        //Create a WebPrintJob obj 
        WebPrintJob webPj = new WebPrintJob();
 
        //set a ThermalLabel obj 
        webPj.ThermalLabel = GenerateBasicThermalLabel();
 
        //display print dialog to the client  
        webPj.ShowPrintDialog = true;
        
        //Serialize WebPrintJob and send it back to the client
        //so it can be processed by the TLClientPrint utility
        context.Response.ContentType = "text/plain";
        context.Response.Write(webPj.ToString());
        context.Response.Flush();
        context.Response.End();

    }

    private ThermalLabel GenerateBasicThermalLabel()
    {
        //Define a ThermalLabel object and set unit to inch and label size
        ThermalLabel tLabel = new ThermalLabel(Neodynamic.SDK.Printing.UnitType.Inch, 4, 3);
        tLabel.GapLength = 0.2;
 
        //Define a TextItem object
        TextItem txtItem = new TextItem(0.2, 0.2, 2.5, 0.5, "Thermal Label Test");
 
        //Define a BarcodeItem object
        BarcodeItem bcItem = new BarcodeItem(0.2, 1, 2, 1, BarcodeSymbology.Code128, "ABC 12345");
        //Set bars height to .75inch
        bcItem.BarHeight = 0.75;
        //Set bars width to 0.0104inch
        bcItem.BarWidth = 0.0104;
 
        //Add items to ThermalLabel object...
        tLabel.Items.Add(txtItem);
        tLabel.Items.Add(bcItem);
 
 
        return tLabel;
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}
    • The ASPX/HTML code
      Open the Default.aspx page and paste the following markup: 

      <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" ID="Head1">
    <title>Test ThermalLabel Client Printing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="TLClientPrint.js" type="text/javascript"></script>
</head>
<body>
    <form id="Form2" runat="server">
    <div>
    <h1>ThermalLabel SDK Client Print Samples</h1><br />
    <input type="button" value="Print Basic Label..." onclick="javascript:printThermalLabel()" />
    <br />
    <br />
    <cite>Remember that the client must install the TLClientPrint Utility first!</cite>
    </div>    
    </form>
</body>
</html>
      Notice that in the page we have:
      • A script reference to jQuery (using Google CDN) and a reference to the local TLClientPrint.js file
      • A simple HTML button invoking the printThermalLabel() function we defined in the TLClientPrint.js file
  • Please download and install ThermalLabel SDK if you don't have it already installed in your dev machine.
  • Ensure the Client Machine has the TLClientPrint utility installed. You could provide the user with a link to download and install the TLClientPrint utility. NOTE: You need to install it in your own dev machine too if you want to test it locally. The TLClientPrint utility is located in the installation folder of ThermalLabel SDK, usually under C:\Program Files (x86)\Neodynamic\ThermalLabel SDK\vN.0\TLClientPrint\Installer
  • Open Visual Studio and create a new ASP.NET (4.6.1+) website. Name it as WebSiteThermalLabelPrintSample
  • In the ASP.NET project, add a reference to Neodynamic.SDK.ThermalLabel.dll and Neodynamic.SDK.ThermalLabel.WebPrinting.dll which are located in the installation folder of the product.
  • Now, we'll code our website. Remember it is a simple page with a button that when clicked by the user, it will start the client side printing process.
    • The javascript code
      Our client print solution uses basic javascript code from jQuery framework. You can use a local copy of jQuery (1.4.1+) or use any of the CDN services hosting jQuery. In our case, will choose the Google Ajax API CDN and reference it in our aspx page. (You can see it in the Default.aspx markup later in this guide)

    • Add to your project a new Javascript file, name it TLClientPrint.js and paste the following code: 

      
/*
* ThermalLabel Client Print Utility
* part of ThermalLabel SDK
* https://www.neodynamic.com/
* Copyright (c) 2018 - Neodynamic SRL
*/
 
$(document).ready(function () {
    if( window.chrome ) {
	  $('body').append('<a id="tlprint"></a>');
	} else {
	  $('<iframe />', {
        name: 'tlprint',
        id: 'tlprint',
        width: '1',
        height: '1',
        style: 'visibility:hidden;position:absolute'
		}).appendTo('body');
	}  
})
 
function printThermalLabel() {
    var webPrintJobUrl = $(location).attr('protocol') + "//" + $(location).attr('host') + "/GetWebPrintJob.ashx";
    if( window.chrome ) {
		$('#tlprint').attr('href', 'tlprint:' + webPrintJobUrl);
		var a = $('a#tlprint')[0];
		var evObj = document.createEvent('MouseEvents');
		evObj.initEvent( 'click', true, true );
		a.dispatchEvent(evObj);
	} else { 
		$("#tlprint").attr("src", "tlprint:" + webPrintJobUrl);
	}
}
      This code features the printThermalLabel() function which will be invoked by the button on the aspx page to start the client printing process.

    • The HTTP Handler for creating the WebPrintJob
      Add a new HTTP Generic Hanlder (*.ashx) and name it GetWebPrintJob.ashx. In this file, we'll generate a WebPrintJob to print a simple thermal label (with a text and a Code 128 barcode) and instructing the TLClientPrint utility to display the default print dialog to the user. Copy/Paste the following code: 

      
<%@ WebHandler Language="VB" Class="GetWebPrintJob" %>

Imports System
Imports System.Web

Imports Neodynamic.SDK.Printing

Public Class GetWebPrintJob : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        'Create a WebPrintJob obj 
        Dim webPj As New WebPrintJob()
 
        'set a ThermalLabel obj 
        webPj.ThermalLabel = GenerateBasicThermalLabel()
 
        'display print dialog to the client
        webPj.ShowPrintDialog = True
            
        'Serialize WebPrintJob and send it back to the client
        'so it can be processed by the TLClientPrint utility
        context.Response.ContentType = "text/plain"
        context.Response.Write(webPj.ToString())
        context.Response.Flush()
        context.Response.End()

    End Sub

    Private Function GenerateBasicThermalLabel() As ThermalLabel
 
        'Define a ThermalLabel object and set unit to inch and label size
        Dim tLabel As New ThermalLabel(UnitType.Inch, 4, 3)
        tLabel.GapLength = 0.2
        'Define a TextItem object
        Dim txtItem As New TextItem(0.2, 0.2, 2.5, 0.5, "Thermal Label Test")
        'Define a BarcodeItem object
        Dim bcItem As New BarcodeItem(0.2, 1, 2, 1, BarcodeSymbology.Code128, "ABC 12345")
        'Set bars height to .75inch
        bcItem.BarHeight = 0.75
        'Set bars width to 0.0104inch
        bcItem.BarWidth = 0.0104
        'Add items to ThermalLabel object...
        tLabel.Items.Add(txtItem)
        tLabel.Items.Add(bcItem)
 
        Return tLabel
 
    End Function

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class
    • The ASPX/HTML code
      Open the Default.aspx page and paste the following markup: 

      <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" ID="Head1">
    <title>Test ThermalLabel Client Printing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="TLClientPrint.js" type="text/javascript"></script>
</head>
<body>
    <form id="Form2" runat="server">
    <div>
    <h1>ThermalLabel SDK Client Print Samples</h1><br />
    <input type="button" value="Print Basic Label..." onclick="javascript:printThermalLabel()" />
    <br />
    <br />
    <cite>Remember that the client must install the TLClientPrint Utility first!</cite>
    </div>    
    </form>
</body>
</html>
      Notice that in the page we have:
      • A script reference to jQuery (using Google CDN) and a reference to the local TLClientPrint.js file
      • A simple HTML button invoking the printThermalLabel() function we defined in the TLClientPrint.js file


That's it! To test it locally, first ensure you have the TLClientPrint utility installed (of course install it on any other client machine you want to test the project too). You will get something like this:

ThermalLabel SDK Client Print Samples

The sample page in Google Chrome (Remember our solution will work with these minimum versions of most popular browsers: Internet Explorer 6.0, Firefox 2.0, Chrome 11, Opera 9.0 and Safari 3.0)

When the user clicks the "Print Basic Label…" button, it's likely the browser will display some dialog to him. This is ok as the button is trying to launch the TLClientPrint utility. Here is some screenshots of the possible dialogs displayed by the most popular browsers. You can instruct to the user how to do this once by specifying the correct values on those dialogs.

  • For Internet Explorer users, instruct them to uncheck the "Always ask before opening this type of address" and click Allow button.

    Internet Explorer TLClientPrint dialog

  • For Firefox users, instruct them to check the "Remember my choice for tlprint links" and click OK button.

    Firefox TLClientPrint dialog

  • For Chrome users, instruct them to check the "Remember my choice for all links of this type." and click Launch Application button.

    Chrome TLClientPrint dialog

After the user's confirmation, the TLClientPrint utility will run and in this case, the default Print Dialog will be displayed:

TLClientPrint default print dialog

The user is asked for his printer settings like DPI, printer language (ZPL, EPL or Fingerprint) and in this case the Windows Driver name. Again, remember that you can print directly to the client printer without displaying any dialog but you need to know all the needed info about the client printer before doing such thing.

After user click Ok button, the ThermalLabel object you created in your ASP.NET website will be printed to the client printer!

The barcode thermal label which will be printed to the client printer.
The barcode thermal label which will be printed to the client printer.



Useful? Share it!

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.