Printing from Websites part 1

Hi Everyone, I’m back with another installment of Printing for Dummies.   Week after week we get questions about how to print data from a webpage to a local printer.  Over the course of time, we've come up with a number of solutions and I thought I would take the opportunity to share them.

 

I’m not talking about printing the actual html page.  You can do that, but most people just use the built-in browser printing function to a regular office printer.  I’m talking about doing things like printing a shipping label based on form data on the website, inventory tags, or receipts.  Understanding your options is especially useful if you are expecting your webpages to be viewed by many different devices (ex. PC’s, tablets, mobile computers).

 

In this series of blog posts, I’ll talk about several printing options.  Based on your use case, likely only one of them will be useful to you.  In this post, I’ll talk about printing through print drivers.  The next post, I’ll talk about printing directly through Javascript ( HTTP POST ).  After that I’ll discuss some hybrid options.  If you want to know how to print from your webserver, I have a blog post here talking about Zebra’s capabilities.

 

If your web application is designed to primarily be used on PC’s and you are not sure what type of printer will be used to print the labels, the easiest way to print is using the built in printing function in most modern browsers.  Developers have two main options for this.  You can present the label or receipt as a regular webpage in HTML.  Some developers find it easier to create the document on the webserver as a pdf and present that to the customer.  The customer then has to click the browser or Adobe® print function to send the page to a driver. 

 

The benefits to driver based printing are that it is the standard technology for printing.  Also, you do not need to deal with vendor-specific print languages.  Most customers know how to use it and most web development is done using this method for printing.  The printers can be USB connected or networked to the user’s PC.

 

The downsides when printing via drivers are many.  Much of the printer setup is completely out of the developers control.  Drivers are set up by the users so it is highly possible that printouts may vary due to driver configurations.  Also most modern browsers have a virtual print driver which ends up doing some pre-formatting, then sends the document to a regular driver.  This complexity could also cause the printouts to differ for each user.  This may not be an issue for printing your Amazon® wish list on 8.5” x 11” paper, but it is when you are printing something like a small compliance label. 

 

Another issue is that a proper driver must be installed on the user’s PC.  Windows has generic drivers, but many times these are not useful with specialty or thermal printers. It is highly recommended that users download and use the newest Zebra Drivers for their printers.  Sometimes customers are not willing or able to install any software (including drivers) on their workstations due to lack of Administrator privileges.  Drivers are also only really highly available on PC’s.  If the website is viewed on a mobile device, drivers generally do not exist.   Even in the Enterprise space, operations are being converted more and more to mobile. 

 

In the end, printing from a website with a driver is good in specific situations, but is not useful in some applications.  In future posts I will outline Zebra’s answers for these issues.

 

More articles on this topic::

Printing from Websites part 2

 

Zebra Web Printing Solutions

 

 

Robin West

ISV Engineer - Zebra Technologies

Comments



Hi Chris,

Yes XML printing works fine with HTTP POST.  I have an example of it in the demo from the post Printing from Websites part 2.  If you select the Zebra demo labels - I think the "ship label" should be using XML printing. 

Robin


I just got around to testing this.  I do not see the demo you describe in the Part2 downloads.  I also tried sending the XML as I would through a socket and it does not work.

/chris

```

<labels _FORMAT="E:08MOVETAG.ZPL" _QUANTITY="1" _PRINTERNAME="18J142702793" _JOBNAME="X">

    <label>

        <variable name="net_weight">NER</variable>

        <variable name="notes">NOTES</variable>

        <variable name="part_description">PTDESC</variable>

        <variable name="time_stamp">DT</variable>

        <variable name="heat_number">HT</variable>

        <variable name="operation_description">OPDESV</variable>

        <variable name="shop_order">SONUM</variable>

        <variable name="tare_weight">TARE</variable>

        <variable name="piece_quantity">QTY</variable>

        <variable name="department">DEPT</variable>

        <variable name="workcenter">WC</variable>

        <variable name="lot_number">LOT</variable>

        <variable name="move_ticket_number">TKNUM</variable>

        <variable name="part_number">PN</variable>

        <variable name="operation_number">OPNUM</variable>

        <variable name="gross_weight">GROSS</variable>

    </label>

</labels>

```


Oops... nevermind it works, just forgot the doc declaration

```

<?xml version="1.0" standalone="no"?>

<!DOCTYPE labels SYSTEM "label.dtd">

```


Hi Robin,

I have a similar issue to the HTTP POST solution you posted.

My users (there's only about 3 of them needing to use this particular functionality) have Zebra mobile printers connected to their laptops via USB. The printers do NOT have an IP address, as they are not networked. I want to have the user click on a "Print Label" button on the webpage, then send a ZPL file to the USB virtual port in order to print.

It isn't an issue if the print dialog is displayed.

So how do I directly send the ZPL to the users USB connected printer?


Hi Ben,

Sending data directly to USB printers from webpages is tricky.  Browsers are designed to block access to that sort of thing.  You do have a couple of options.

1. EDIT: This only works in Firefox and IE browsers.  Set up generic text drivers on the users's PC's.  Select a USB port instead of the TCP one in the example.  Direct your print action to open a new window and just have your ZPL in the new page:

<a href="print.html"  onclick="window.open('print.html', 'newwindow', 'width=300, height=250'); return false;"> Print</a>

Refrence

print.html

${^XA^FO100,100^A0N50,50^FDTEST LABEL name test from testville^FS^XZ}$

<html>

<body onload="loaded();">

<script>

function loaded()

{

window.print();

}

</script>

</body>

</html>

Then you can print it to the generic driver as raw data.

2. Create a java applet or some other type of browser extension.  We have some sample code here.

3. Zebra does have a pay for app to do exactly this.  Contact ddamo@zebra.com for more information.

Given the small number of users, I would recommend option 1 as the easiest for now.

Hope this helps,

Robin


Hi Robin,

I am trying to print ZPL from Chrome browser, and I used the above solution you provided using Generic text driver.  As suggested by you I can print using Edge and Firefox browser but not with Chrome.  Our users use Chrome to run the web application that prints Fedex Labels.  Can you please provide us a solution so we can print the label that is generated using ZPL and Chrome Browser.

Thanks for your help,

Sandeep


Hi Sandeep,

I'm wondering, did you solve this issue?

best regards

Johann


Hi Sandeep and Johann,

USB printing with Chrome and other browsers is the primary use case we are trying to solve with our Browser Print tool (new since this article was first published). It is the solution we are currently recommending as it works similarly to a driver, but is designed for web app use.

Robin


Thank you very much for this information :-)

I will try this tomorrow.

Best regards

Johann


Hi Robin,

I have setup the browserprint stuff.

And I am following the instructions of use.

When I go to the sample/index.html I get my printer in the drop down list, however when I click print I get the error:

An error occurred while printing. Please try again.

Could you please help me with this?

My printer is : TLP 2844

And my operating system is Win 10.

It works fine If I go to Printer properties and click "print a test page".

regards

Johann


If I take a look at the request response I can see it is : Failed to write to device (when localhost:9100/write is called).

Any hints on this...?

best regards

Johann


Dear Robin,

I'm realy one of the dummy's :-)

I managed to get the printer working with the index.html sample

and changed it a little. I want to print multiple labels with data from database

i'm reading data and then print label. The problem is that i realy dont know how to print multiple lables and can you tell me how to change font and how to print text on new line.

with the code below it's printing all the text at one line.

<%

strsql= "SELECT barcodetemp.barcode, OrderDefinitief.Leveranciersnaam, OrderDefinitief.short_product_name, OrderDefinitief.naam, OrderDefinitief.besteld, OrderDefinitief.Inhoud, Personen.Bedrijf FROM (barcodetemp LEFT JOIN OrderDefinitief ON barcodetemp.barcode = OrderDefinitief.Barcode) LEFT JOIN Personen ON OrderDefinitief.userid = Personen.UserID ORDER BY OrderDefinitief.naam"
set rs = dbconnection.execute(strsql)
if not rs.eof then
%>

<div id="print_form" style="display:none">
     
<textarea id="entered_name"  rows='5' cols='40'><%=rs("short_product_name") & chr(13) & rs("besteld") & " x " & rs("inhoud") & chr(13) & rs("bedrijf")%></textarea>
<%
else
%>
<script type="text/javascript">
   
setTimeout(doSomething,500);

function doSomething() {
window.open('scannen-legen.asp','_self');
}

</script>
<%
end if
%>


Hi Peter,
Even I had to look up a few of these answers, so not dumb.

I'm assuming you are just printing lines of text.  If that's the case, you need to add a carriage return and line feed to each line in order for the printer to process each as a separate line. A simple "\r\n" in the text data is sufficient.

To change the font, Use the SETLP command.

Also, I can't stress this enough, I do not recommend using the POST printing method in any situation where you are printing more than very occasionally.  There is no way to know if the printer is offline or unable to print for any reason, there is no flow control so printing multiple things in a row is problematic, and your browser could stop allowing you to do it at any time.  If all your printers are on a local network, print from the server using TCP.  If they are networked but remote, look into Cloud Connect.  If they are USB, mixed, or Cloud Connect won't work for you, use Browser Print.

Hope this helps!


Hi Robin 

Good Day I have project with zebra TLP 2844 i read some comments

I try to print this direct to TLP 2844 using notepad but the result is just a plain text

N\nA50,200,0,5,1,1,N,\"EXAMPLE1\"\nP1\\n


Hi Alvin, If you are using notepad, you are printing through a driver, which renders the text file as text rather than print commands.  Either you need to set up the driver as a generic raw text driver to print this way, or use the 'Open Communication with Printer' function in our PC based Printer Setup Utilities | Zebra  tool to send direct commands to the printer.

The other issue is the print control language you are using is EPL.  If the printer is a TLP 2824 Plus, rather than a TLP 2824, it needs to be set up to take EPL rather than the standard ZPL control language.


I have managed to print from html demo print but when I integrate my php code, I got

Unable to get property 'sendThenRead' of undefined or null reference from check status. The reason I need to print from php code is that I need to query MySQL db with Crud to get our product ID. Is there a solution for supporting printing from php code instead of HTML #print onClick? I am using PHP post submit.


Hi Robin,

First of all thank you for this great post, this is exactly what I was looking for. I'd like to print out a label to a ZT410 Zebra printer through a web page (using javascript), this page contains all the label information and a picture tied to an ID generated automatically by the page. According to your post I shouldn't have any issues through Javascript ( HTTP POST) however I don't know how to pass the ID information to the printer as input data and generate the barcode automatically using the ID information. I mean, is there a way to pass this ID information to the printer a print a barcode with this info?

Thanks Robin for your support.