How to print barcode thermal labels to Zebra ZPL or EPL printers at client side in AS

How to print barcode thermal labels to Zebra ZPL or EPL printers at client side in ASP.NET Websites with C# and VB

Prerequisites

• Neodynamic ThermalLabel SDK 4.0 or greater
• ASP.NET 3.5 or greater
• Any Zebra compatible ZPL/EPL thermal printer

In this guide you will learn how to print barcode thermal labels to Zebra compatible ZPL/EPL printers from an ASP.NET website using C# or VB and Neodynamic ThermalLabel SDK.

This guide outlines the scenario known as Client-side Web Printing which basically means that the printing job takes place on the user's machine as is shown in the following figure.

http://www.neodynamic.com/demo-faq/t...arp-VB-PDF.jpg

In the figure, each client has a local Thermal printer and an ASP.NET website hosted in the server is in charge of generating the barcode labels. Those labels are previewed on the client by using any internet browser (IE, Firefox, Chrome, Opera, etc) allowing the user to print them to its local printer.

How does stuff work?

After some testing here at Neodynamic, we found the following workflow to be the most reliable way for printing barcode labels to client-side thermal printers.

http://www.neodynamic.com/demo-faq/t...f-workflow.jpg

1- You create an ASP.NET website using VB or C# and create/generate barcode thermal labels using our ThermalLabel SDK (4.0 or greater).
A- You code a Generic HTTP Handler (*.ashx) in VB or C# instantiating the ThermalLabel objects like TextItem, BarcodeItem, etc. and use the ThermalLabel SDK for generating a PDF output of the label. (NOTE: ThermalLabel SDK does NOT require any third-party tool on the server for generating PDF files!)
B- You create an ASP.NET webpage (*.aspx) which will display the generated barcode label in PDF format using the HTML object tag (A complete sample code is available later in this guide)

2- The user access to the ASP.NET webpage and the barcode label is visualized on the page using the browser’s PDF plugin which features a button for printing the PDF document to a local printer.

3- The user's machine needs to have installed Adobe PDF Reader and the Zebra driver for his printer e.g. Zebra Designer Driver (ZDesigner)

4- For printing, the user must click on Print button of PDF plugin. That button will display the Print Dialog on which the user must specify the installed Zebra driver for his printer AND CHANGE the label size on such dialog to match the displayed label size if needed. For instance, if the ThermalLabel SDK is generating a 4in x 3in label, then the same size must be specified on the Print dialog! Otherwise the printing output could be cut off.

A simple ASP.NET website sample
In the following steps, we'll be creating a simple ASP.NET website which will allow a user to fill a form with product information like name and code. That info is used in the server side for generating a thermal label (4in x 3in) displaying the product name as text and the product code as a Code 128 linear barcode. ThermalLabel SDK is used for such task and it will generate a PDF output of the label for displaying and printing it on the user's machine and printer.

To reproduce the sample code, please follow up these steps:

• Open Visual Studio (2008 or 2010) or Visual Web Developer (2008 or 2010) and create a new ASP.NET website targeting ASP.NET v3.5 or greater. Name your project ThermalLabelAspNetClientSidePrintingCS (if you are using C#) or ThermalLabelAspNetClientSidePrintingVB (if you are using VB)
• Add a reference to ThermalLabel SDK 4.0 assembly (Neodynamic.SDK.ThermalLabel.dll)
• Add a new Generic Handler item naming it LabelGen.ashx
  This handler will take info about the product from the query string parameters. With that info, a ThermalLabel object is created with a TextItem and a BarcodeItem. Then the ThermalLabel is generated in PDF format and sent back to the user’s browser. Copy/paste the following code in your LabelGen.ashx file:
  
  Visual Basic .NET
  Imports System.Web
  
  Imports Neodynamic.SDK.Printing
  Imports System.Threading
  
  Public Class LabelGen
  Implements System.Web.IHttpHandler
  
  
  Dim m_buffer() As Byte
  Dim m_productId As String = ""
  Dim m_productName As String = ""
  Dim m_dpi As Double = 203
  
  Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
  
  'get data for label from the querystring params...
  m_productId = context.Request("prodId")
  m_productName = context.Request("prodName")
  m_dpi = 203
  Try
  m_dpi = Double.Parse(context.Request("dpi"))
  Catch
  
  End Try
  
  Me.GenerateThermalLabel()
  
  context.Response.ContentType = "application/pdf"
  context.Response.BufferOutput = True
  context.Response.BinaryWrite(m_buffer)
  context.Response.Flush()
  
  End Sub
  
  ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
  Get
  Return False
  End Get
  End Property
  
  Private Sub GenerateThermalLabel()
  Dim worker As New Thread(New ThreadStart(AddressOf Me.GenerateThermalLabelWorker))
  worker.SetApartmentState(ApartmentState.STA)
  worker.Name = "GenerateThermalLabelWorker"
  worker.Start()
  worker.Join()
  End Sub
  
  
  Private Sub GenerateThermalLabelWorker()
  'Create the thermal label object
  Dim tLabel As New ThermalLabel(UnitType.Inch, 4, 3)
  
  'Define a TextItem object
  Dim txtItem As New TextItem(0.2, 0.2, 3, 0.5, m_productName)
  'font settings
  txtItem.Font.Name = "Arial"
  txtItem.Font.Unit = FontUnit.Point
  txtItem.Font.Size = 20
  
  'Define a BarcodeItem object
  Dim bcItem As New BarcodeItem(0.2, 1, 3.6, 1.25, BarcodeSymbology.Code128, m_productId)
  'Set bars height to .75inch
  bcItem.BarHeight = 0.75
  'Set bars width to 0.02inch
  bcItem.BarWidth = 0.02
  'font settings
  bcItem.Font.Name = "Arial"
  bcItem.Font.Unit = FontUnit.Point
  bcItem.Font.Size = 12
  'border settings
  bcItem.BorderThickness = New FrameThickness(0.02)
  bcItem.CornerRadius = New RectangleCornerRadius(0.075)
  'center barcode inside its container
  bcItem.BarcodeAlignment = BarcodeAlignment.MiddleCenter
  
  'Add items to ThermalLabel object...
  tLabel.Items.Add(txtItem)
  tLabel.Items.Add(bcItem)
  
  'generate a pdf doc of the label
  Using ms As New System.IO.MemoryStream()
  Using pj As New PrintJob()
  pj.ExportToPdf(tLabel, ms, m_dpi)
  End Using
  
  m_buffer = ms.ToArray()
  End Using
  
  End Sub
  
  End Class
  
  
  Visual C#
  using System;
  using System.Web;
  
  using Neodynamic.SDK.Printing;
  using System.Threading;
  
  namespace ThermalLabelAspNetClientSidePrintingCS
  {
  /// <SUMMARY>
  /// Summary description for LabelGen
  /// </SUMMARY>
  public class LabelGen : IHttpHandler
  {
  byte[] _buffer = null;
  string _productId = "";
  string _productName = "";
  double _dpi = 203;
  
  public void ProcessRequest(HttpContext context)
  {
  //get data for label from the querystring params...
  _productId = context.Request["prodId"];
  _productName = context.Request["prodName"];
  _dpi = 203;
  try
  {
  _dpi = double.Parse(context.Request["dpi"]);
  }
  catch { }
  
  this.GenerateThermalLabel();
  
  context.Response.ContentType = "application/pdf";
  context.Response.BufferOutput = true;
  context.Response.BinaryWrite(_buffer);
  context.Response.Flush();
  }
  
  public bool IsReusable
  {
  get
  {
  return false;
  }
  }
  
  
  private void GenerateThermalLabel()
  {
  Thread worker = new Thread(new ThreadStart(this.GenerateThermalLabelWorker));
  worker.SetApartmentState(ApartmentState.STA);
  worker.Name = "GenerateThermalLabelWorker";
  worker.Start();
  worker.Join();
  }
  
  private void GenerateThermalLabelWorker()
  {
  //Create the thermal label object
  ThermalLabel tLabel = new ThermalLabel(UnitType.Inch, 4, 3);
  
  //Define a TextItem object
  TextItem txtItem = new TextItem(0.2, 0.2, 3, 0.5, _productName);
  //font settings
  txtItem.Font.Name = "Arial";
  txtItem.Font.Unit = FontUnit.Point;
  txtItem.Font.Size = 20;
  
  //Define a BarcodeItem object
  BarcodeItem bcItem = new BarcodeItem(0.2, 1, 3.6, 1.25, BarcodeSymbology.Code128, _productId);
  //Set bars height to .75inch
  bcItem.BarHeight = 0.75;
  //Set bars width to 0.02inch
  bcItem.BarWidth = 0.02;
  //font settings
  bcItem.Font.Name = "Arial";
  bcItem.Font.Unit = FontUnit.Point;
  bcItem.Font.Size = 12;
  //border settings
  bcItem.BorderThickness = new FrameThickness(0.02);
  bcItem.CornerRadius = new RectangleCornerRadius(0.075);
  //center barcode inside its container
  bcItem.BarcodeAlignment = BarcodeAlignment.MiddleCenter;
  
  //Add items to ThermalLabel object...
  tLabel.Items.Add(txtItem);
  tLabel.Items.Add(bcItem);
  
  //generate a pdf doc of the label
  using (System.IO.MemoryStream ms = new System.IO.MemoryStream())
  {
  using (PrintJob pj = new PrintJob())
  {
  pj.ExportToPdf(tLabel, ms, _dpi);
  }
  
  _buffer = ms.ToArray();
  }
  }
  }
  }
  
• Now open Default.aspx file and create a simple form. In it the user can enter a Product Name and Code as well as set up the DPI value for generating the thermal label. The PDF thermal label document generated by the LabelGen.ashx file is displayed to the user by a dynamic generated HTML object tag (of type application/pdf). The browser PDF plugin (the Adobe PDF plugin in most cases) allows the user to zoom, save and print the document. Here the print functionality is essential for client-side thermal label printing.
  
  Open the Default.aspx and copy/paste the following HTML/ASP.NET markup:
  
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head >
  <title>Printing Barcode Labels to Thermal Printers from ASP.NET</title>
  
  <style type="text/css">
  
  #pdf
  {
  width:600px;
  height:400px;
  border: 5px solid #ccc;
  }
  
  h3
  {
  font-family: Sans-Serif, Arial, Tahoma;
  
  }
  
  fieldset
  {
  font-family: Sans-Serif, Arial, Tahoma;
  font-size: 16px;
  
  }
  
  </style>
  
  </head>
  <body>
  <form id="Form2" runat="server">
  <h3>ThermalLabel SDK - Print from client side to thermal printer</h3>
  
  <table>
  <tr>
  <td valign="top">
  <fieldset>
  <legend>Fill the form:</legend>
  <br />
  Product Name:&nbsp;<asp:TextBox ID="TextBox1" runat="server" Text="Sample Product"></asp:TextBox>
  <br />
  Product Code:&nbsp;<asp:TextBox ID="TextBox2" runat="server" Text="ABCD12345"></asp:TextBox>
  <br />
  Printer DPI:&nbsp;<asp:DropDownList ID="DropDownList1" runat="server">
  <asp:ListItem Text="203" Selected="True"></asp:ListItem>
  <asp:ListItem Text="300" ></asp:ListItem>
  <asp:ListItem Text="600" ></asp:ListItem>
  </asp:DropDownList>
  <br />
  <br />
  <asp:Button ID="Button1" runat="server" Text="Refresh Preview" />
  </fieldset>
  </td>
  <td>
  <div id="pdf">
  <asp:Literal ID="pdfViewer" runat="server"></asp:Literal>
  </div>
  </td>
  </tr>
  </table>
  
  </form>
  </body>
  </html>
  
  
  After that, open the code-behind class file of the page i.e. Default.aspx.vb or Default.aspx.cs and copy/paste the following code:
  
  Visual Basic .NET
  Public Class _Default
  Inherits System.Web.UI.Page
  
  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  pdfViewer.Text = CreatePdfObjectTag("LabelGen.ashx?dpi=" + DropDownList1.SelectedItem.ToString() + "&prodId=" + TextBox2.Text + "&prodName=" + TextBox1.Text + "&out=PDF")
  End Sub
  
  Private Function CreatePdfObjectTag(ByVal pdfUrl As String) As String
  Dim sb As New StringBuilder()
  sb.Append("<object type=""application/pdf"" ")
  sb.Append("data=""")
  sb.Append(pdfUrl)
  sb.Append("#toolbar=1&navpanes=0&scrollbar=1&page=1&zoom=100"" width=""600px"" height=""400px"" VIEWASTEXT><p>It appears you don't have a PDF plugin for your browser. <a target=""_blank"" href=""")
  sb.Append(pdfUrl)
  sb.Append(""">Click here to download the PDF file.</a></p></object>")
  Return sb.ToString()
  End Function
  
  End Class
  
  
  Visual C#
  public partial class _Default : System.Web.UI.Page
  {
  
  protected void Page_Load(object sender, EventArgs e)
  {
  pdfViewer.Text = CreatePdfObjectTag("LabelGen.ashx?dpi=" + DropDownList1.SelectedItem.ToString() + "&prodId=" + TextBox2.Text + "&prodName=" + TextBox1.Text + "&out=PDF");
  }
  
  private string CreatePdfObjectTag(string pdfUrl)
  {
  StringBuilder sb = new StringBuilder();
  sb.Append("<object type=\"application/pdf\" ");
  sb.Append("data=\"");
  sb.Append(pdfUrl);
  sb.Append("#toolbar=1&navpanes=0&scrollbar=1&page=1&zoom=100\" width=\"600px\" height=\"400px\" VIEWASTEXT><p>It appears you don't have a PDF plugin for your browser. <a target=\"_blank\" href=\"");
  sb.Append(pdfUrl);
  sb.Append("\">Click here to download the PDF file.</a></p></object>");
  return sb.ToString();
  }
  }
  
• That's it! For testing, just open Default.aspx file in your preferred browser. The page will display the thermal label in PDF format generated by the LabelGen.ashx handler with the default values.
  
  http://www.neodynamic.com/demo-faq/t...142/print1.jpg
  
• Enter some product info like "Super Neo Cycle" for the name and "NEO23900038765" for the product code. Click on "Refresh Preview" button and the thermal label will be re-generated by LabelGen.ashx handler.
  
  http://www.neodynamic.com/demo-faq/t...142/print2.jpg
  
• Finally, for printing, click on the "printer icon button" of the PDF plugin toolbar. The print dialog will appear. IMPORTANT: In the print dialog you must select the installed Zebra printer driver. In the sample, it is a "ZDesigner GK420t". When you select the driver, you get a print preview based on the PAPER size which is set up on the driver. In the figure it is "Paper: 3.0 x 2.0in" while the document i.e. the thermal label generated by the website (LabelGen.ashx) is 4.0 x 3.0in!
  
  http://www.neodynamic.com/demo-faq/t...142/print3.jpg
  
  You (or the user) must change the PAPER size of the printer driver to match the thermal label size; otherwise the label output printing is likely to be cut off. To change the PAPER size on the printer driver you must click on "Properties" button on the print dialog. That will display the printer driver properties allowing you to change the paper size.
  
  http://www.neodynamic.com/demo-faq/t...142/print4.jpg
  
  When done, click ok on both dialogs and the label will be printed to the user's local thermal printer.

Links:
This Demos
Demos
Download ThermalLabel SDK for .NET
More Information about Neodynamic ThermalLabel SDK for .NET


Neodynamic
.NET Components & Controls
http://www.neodynamic.com
http://www.thermal-label.net