Search code examples
javascriptprintingzebra-printers

Is it possible to print Cards to a ZEBRA ZXP Series 3 Printer through Browser Print javascript code?


I'm using the JavaScript code provided by Zebra technologies but I keep getting "an error occured". Is it only possible to print out Labels via Browser Print and not Cards? I am printing to a Zebra ZXP Series 3 Card Printer

I have attached the code I am using supplied by them.

Below is the sample code provided by them. It's called Browser Print

DevDemo.js & Index.html

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;

function setup_web_print()
{
	$('#printer_select').on('change', onPrinterSelected);
	showLoading("Loading Printer Information...");
	default_mode = true;
	selected_printer = null;
	available_printers = null;
	selected_category = null;
	default_printer = null;
	
	BrowserPrint.getDefaultDevice('printer', function(printer)
	{
		default_printer = printer
		if((printer != null) && (printer.connection != undefined))
		{
			selected_printer = printer;
			var printer_details = $('#printer_details');
			var selected_printer_div = $('#selected_printer');
			
			selected_printer_div.text("Using Default Printer: " + printer.name);
			hideLoading();
			printer_details.show();
			$('#print_form').show();

		}
		BrowserPrint.getLocalDevices(function(printers)
			{
				available_printers = printers;
				var sel = document.getElementById("printers");
				var printers_available = false;
				sel.innerHTML = "";
				if (printers != undefined)
				{
					for(var i = 0; i < printers.length; i++)
					{
						if (printers[i].connection == 'usb')
						{
							var opt = document.createElement("option");
							opt.innerHTML = printers[i].connection + ": " + printers[i].uid;
							opt.value = printers[i].uid;
							sel.appendChild(opt);
							printers_available = true;
						}
					}
				}
				
				if(!printers_available)
				{
					showErrorMessage("No Zebra Printers could be found!");
					hideLoading();
					$('#print_form').hide();
					return;
				}
				else if(selected_printer == null)
				{
					default_mode = false;
					changePrinter();
					$('#print_form').show();
					hideLoading();
				}
			}, undefined, 'printer');
	}, 
	function(error_response)
	{
		showBrowserPrintNotFound();
	});
};
function showBrowserPrintNotFound()
{
	showErrorMessage("An error occured while attempting to connect to your Zebra Printer. You may not have Zebra Browser Print installed, or it may not be running. Install Zebra Browser Print, or start the Zebra Browser Print Service, and try again.");

};
function sendData()
{
	showLoading("Printing...");
	checkPrinterStatus( function (text){
		if (text == "Ready to Print")
		{
			selected_printer.send(format_start + $('#entered_name').val() + format_end, printComplete, printerError);
		}
		else
		{
			printererror(text);
		}
	});
};
function checkPrinterStatus(finishedFunction)
{
	selected_printer.sendThenRead("~HQES", 
				function(text){
						var that = this;
						var statuses = new Array();
						var ok = false;
						var is_error = text.charAt(70);
						var media = text.charAt(88);
						var head = text.charAt(87);
						var pause = text.charAt(84);
						// check each flag that prevents printing
						if (is_error == '0')
						{
							ok = true;
							statuses.push("Ready to Print");
						}
						if (media == '1')
							statuses.push("Paper out");
						if (media == '2')
							statuses.push("Ribbon Out");
						if (media == '4')
							statuses.push("Media Door Open");
						if (media == '8')
							statuses.push("Cutter Fault");
						if (head == '1')
							statuses.push("Printhead Overheating");
						if (head == '2')
							statuses.push("Motor Overheating");
						if (head == '4')
							statuses.push("Printhead Fault");
						if (head == '8')
							statuses.push("Incorrect Printhead");
						if (pause == '1')
							statuses.push("Printer Paused");
						if ((!ok) && (statuses.Count == 0))
							statuses.push("Error: Unknown Error");
						finishedFunction(statuses.join());
			}, printerError);
};
function hidePrintForm()
{
	$('#print_form').hide();
};
function showPrintForm()
{
	$('#print_form').show();
};
function showLoading(text)
{
	$('#loading_message').text(text);
	$('#printer_data_loading').show();
	hidePrintForm();
	$('#printer_details').hide();
	$('#printer_select').hide();
};
function printComplete()
{
	hideLoading();
	alert ("Printing complete");
}
function hideLoading()
{
	$('#printer_data_loading').hide();
	if(default_mode == true)
	{
		showPrintForm();
		$('#printer_details').show();
	}
	else
	{
		$('#printer_select').show();
		showPrintForm();
	}
};
function changePrinter()
{
	default_mode = false;
	selected_printer = null;
	$('#printer_details').hide();
	if(available_printers == null)
	{
		showLoading("Finding Printers...");
		$('#print_form').hide();
		setTimeout(changePrinter, 200);
		return;
	}
	$('#printer_select').show();
	onPrinterSelected();
	
}
function onPrinterSelected()
{
	selected_printer = available_printers[$('#printers')[0].selectedIndex];
}
function showErrorMessage(text)
{
	$('#main').hide();
	$('#error_div').show();
	$('#error_message').html(text);
}
function printerError(text)
{
	showErrorMessage("An error occurred while printing. Please try again." + text);
}
function trySetupAgain()
{
	$('#main').show();
	$('#error_div').hide();
	setup_web_print();
	//hideLoading();
}
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/BrowserPrint-1.0.4.min.js"></script>
<script type="text/javascript" src="js/DevDemo.js"></script>

<script type="text/javascript">
$(document).ready(setup_web_print);
</script>
</head>
<body style="background-color:#D8D8D8; font-size:24px;">
	<div class="navbar navbar-inverse " role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><p style="font-size: 150%;">Zebra Browser Print Demo</p></a>
        <script type="text/javascript">
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
//{
//OSName="Windows";
//document.write('<a href="ZebraWebPrint.exe" class="navbar-brand" href="#">Download the '+OSName+' App</a>');
//}
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

        </script>
			
      </div><!-- /navbar-header -->
    </div><!-- /container -->
  </div><!-- /navigation -->
  <div class="container" style="width:500px">
    <div id="main">
      <div id="printer_data_loading" style="display:none"><span id="loading_message">Loading Printer Details...</span><br/>
        <div class="progress" style="width:100%">
          <div class="progress-bar progress-bar-striped active"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
          </div>
        </div>
      </div> <!-- /printer_data_loading -->
      <div id="printer_details" style="display:none">
        <span id="selected_printer">No data</span> 
        <button type="button" class="btn btn-success" onclick="changePrinter()">Change</button>
      </div><br /> <!-- /printer_details -->
      <div id="printer_select" style="display:none">
        Zebra Printer Options<br />
        Printer: <select id="printers"></select>
      </div> <!-- /printer_select -->
      <div id="print_form" style="display:none">
        Enter Name: <input type="text" id="entered_name"></input>
        <br /><br />
        <button type="button" class="btn btn-lg btn-primary" onclick="sendData();" value="Print">Print Label</button>
      </div> <!-- /print_form -->
    </div> <!-- /main -->
    <div id="error_div" style="width:500px; display:none"><div id="error_message"></div>
      <button type="button" class="btn btn-lg btn-success" onclick="trySetupAgain();">Try Again</button>
    </div><!-- /error_div -->
	</div><!-- /container -->
</body>
</html>

I've reached out to their tech support but to no avail. Any ideas? I think what is happening is is_error is never being set to '0'


Solution

  • Browser Print only works with Zebra label and receipt printers. Card printers are not currently supported.
    Cards can currently be printed via 3 methods. Drivers, .NET apps using the SDK, or Java apps using the Link-OS SDK.