1 Reply Latest reply on Jan 25, 2018 12:51 PM by Manuel Caicedo-Rivera

    Simple Zebra Browser Print with formatted text

    Alex Whittle



      We've followed the sample Zebra browser print example and have this working but how do you send anything more complicated than name to be printed?  Ideally we would like multiple lines of text printed on a label but can't work out how the text needs to be supplied.


      Any help greatly appreciated!




        • Re: Simple Zebra Browser Print with formatted text
          Manuel Caicedo-Rivera

          Hi Alex,


          I assume you already downloaded the standard browser print version for your PC. If you did that, so you will be able to find the folder with the sample code on the following address:


          C:\Program Files (x86)\ZebraBrowserPrint\ZebraBrowserPrintDocsWebCodeExamples

          Then you open sample folder and JS folder, and open the the javascript file called DevDemo.js. In that file, you will be able to modify the structure of the data you want to send and print. On top of the file you will see a var called start, another called end. This is the format for ZPL printing, you can go to this link to learn more how to use ZPL with Zebra printers.


          var available_printers = null;

          var selected_category = null;

          var default_printer = null;

          var selected_printer = null;

          var format_start = "^XA^LL200^FO80,50^A0N36,36^FD";

          var format_end = "^FS^XZ";

          var default_mode = true;


          With the function below, you are able to modify the variables and the data sent to the printer.


          function sendData()



          checkPrinterStatus( function (text){

          if (text == "Ready to Print")


          selected_printer.send(format_start + $('#entered_name').val() + format_end, printComplete, printerError);









          What you should do now is to modify the following elements of the code above:


          1.) You can leave the variables below empty or remove them, it is up to you:




          Then this is a sample code that you would need to put on the text_field:







          ^FT310,315^A0I,28,28^FH\^FDOne Line^FS

          ^FT291,269^A0I,28,28^FH\^FDSecond Line^FS

          ^FT326,219^A0I,28,28^FH\^FDThird Line^FS

          ^FT302,167^A0I,28,28^FH\^FDFour Line^FS

          ^FT273,118^A0I,28,28^FH\^FDFifth Line1^FS



          You can play with JavaScript or with HTML to mask the ZPL code, and leave the portions that you want the user writes on the text_fields.


          Please, notice that you are able to set up the x,y position of your texts on the label.


          I encourage to use our designing label tool. You can download the ZebraDesigner from the link below, then, you can create on the fly a label and modify the position of the label’s pieces.




          Once you have finished your ZPL label design, ZebraDesigner will generate a txt file with the ZPL code that you would need to add to his web app.