Print Unicode UTF8 Text to Zebra ZPL printer from Blazor
Product JSPrintManager for Blazor Published 07/07/2021 Updated 07/07/2021 Author Neodynamic
Overview
In this walkthrough, you'll learn how to print Unicode / UTF-8 text to Zebra ZPL printers right from Blazor with the help of our JSPrintManager for Blazor 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!
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 Blazor 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 Blazor
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! - In your Blazor project...
- Add a NuGet reference to the JSPrintManager Razor Component
- Add the JSPrintManager service...
- Add the following statement at the top of your
Startupfile
using Neodynamic.Blazor;- For Blazor Server
Add the following line in theStartup's ConfigureServicesmethod
services.AddJSPrintManager(); - For Blazor WebAssembly
Add the following line in theProgram's Mainmethod
builder.Services.AddJSPrintManager();
- For Blazor Server
- Add the following statement at the top of your
- Add the following statement in the
_Imports.razorfile
@using Neodynamic.Blazor - Add a new Razor Page and copy/paste the following code. Please read the source code comments to understand the printing logic!
@page "/" @inject JSPrintManager JSPrintManager <div> <strong>JSPM </strong><span>WebSocket Status </span> @if (JSPrintManager.Status == JSPMWSStatus.Open) { <span class="badge badge-success"> <i class="fa fa-check" /> Open </span> } else if (JSPrintManager.Status == JSPMWSStatus.Closed) { <span class="badge badge-danger"> <i class="fa fa-exclamation-circle" /> Closed! </span> <div> <strong>JSPrintManager (JSPM) App</strong> is not installed or not running! <a href="https://neodynamic.com/downloads/jspm" target="_blank">Download JSPM Client App...</a> </div> } else if (JSPrintManager.Status == JSPMWSStatus.Blocked) { <span class="badge badge-warning"> <i class="fa fa-times-circle" /> This Website is Blocked! </span> } else if (JSPrintManager.Status == JSPMWSStatus.WaitingForUserResponse) { <span class="badge badge-warning"> <i class="fa fa-user-circle" /> Waiting for user response... </span> } </div> @if (JSPrintManager.Status == JSPMWSStatus.Open) { @if (JSPrintManager.Printers == null) { <hr /> <div class="spinner-border text-info" role="status"> <span class="sr-only">Please wait...</span> </div> <strong><em>Getting local printers...</em></strong> } else { <div> <h1>Print Unicode UTF-8 Text to Zebra ZPL printers from Blazor</h1> <hr /> <EditForm Model="@MyPrinter"> <div class="form-check"> <InputCheckbox class="form-check-input" @bind-Value="UseDefaultPrinter" />Print to <strong>Default Printer?</strong><br /> </div> <p>or...</p> <p>Select an <strong>Installed Printer</strong>:</p> <InputSelect @bind-Value="MyPrinter.PrinterName" class="form-control form-control-sm"> @foreach (var p in JSPrintManager.Printers) { <option value="@p">@p</option> } </InputSelect> </EditForm> <br /><br /> <input type="button" value="Print Now..." @onclick="DoPrint" /> </div> } } @code { // An Installed Printer instance private InstalledPrinter MyPrinter { get; set; } = new(); // Use default printer? private bool UseDefaultPrinter = false; // Printing... private void DoPrint() { // Status = Open means that JSPM Client App is up and running! if (JSPrintManager.Status == JSPMWSStatus.Open) { // Create a ClientPrintJob var cpj = new ClientPrintJob(); // Set target Printer cpj.ClientPrinter = UseDefaultPrinter ? new DefaultPrinter() : MyPrinter; // Create Zebra ZPL commands for sample label var cmds = (char)0xef + (char)0xbb + (char)0xbf; //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"; // Set the RAW commands to send to the printer... cpj.PrinterCommands = cmds; // PRINT IT!!! JSPrintManager.SendClientPrintJob(cpj); } } protected override void OnAfterRender(bool firstRender) { if (firstRender) { // Handle OnGetPrinters event... JSPrintManager.OnGetPrinters += () => { if (JSPrintManager.Printers != null && JSPrintManager.Printers.Length > 0) { // Display installed printers... StateHasChanged(); } else { Console.WriteLine("No printers found..."); } }; // Handle OnStatusChanged event to detect any WSS status change JSPrintManager.OnStatusChanged += () => { StateHasChanged(); // Status = Open means that JSPM Client App is up and running! if (JSPrintManager.Status == JSPMWSStatus.Open) { //Try getting local printers... JSPrintManager.TryGetPrinters(); } }; // Start WebSocket comm JSPrintManager.Start(); } base.OnAfterRender(firstRender); } }
- 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.