RAW Printing from Web Based Application
This is what I called a revolutionary for the web based application to handle RAW printing. Somehow, I found this Java applet named jZebra & it worked successfully as same as 16-bit console printing operation - the objective is prohibiting paper to rolled up one sheet full. Different with other extension “add-on” (eg: php_printer module on PHP) which is executed on server, jZebra operated on client side – since it Java based applet, you know it’ll depends on existing JRE package in each client. But - nevertheless - printing in a small paper (eg: receipt or bill) from web based application is not a problem anymore.A couple years ago, I was thinking about to create a small win32 application purposed to take job RAW printing on LAN on here and there (with AssignPrn function available on Delphi), it’s done to print locally but unfortunately failed to handle network printing session – especially on non Windows machine (Linux ~ with CrossOver “limitation” capabilities). Anyway, you can read the online documentation of jZebra or try the sample directly provided over Google code page where it published for free.
On current article, I’d like to share about my experiment on exploring jZebra, including a short review and a bit modification of HTML page so that jZebra will have more flexible to use. Before continue reading this & decide to use it, I suggest you to read first of jZebra manual whether it suitable to your need or not.
At first, I try to create an HTML page, embed the applet – minor modification from the example - & store it on local Apache web server. The picture below explains what I’ve done above:
Image above shows jZebra initialization process. Once the applet executed, each & every browser will need a confirmation window to run Java applet. It signed by small loading logo rolling where the embed applet placed on a page.
When printer doesn’t exist, the applet will return fail code says that the printer is not yet ready. I switch back to Printer & Fax Control Panel & found that there’s no printer configured, while I still use FinePrint screen printing application as my default printer on my netbook.
Any printing process regarding to unsuccessful printer communication will raise failed information just like below picture.
For the experiment, I then rename the “FinePrint” printer name to “zebra”
And … voila, the applet status says it ready.
Press print button & below picture display what’s happened on Windows printer status. You can see that the document name is “Java Printing”.
The printer on my experiment particularly used is LX-300 with USB plug cable. At the same time I press the Print button, the print will printing on paper directly & it stop to the end of string. It has exact behavior like DOS printing as I told before.
The above experiment I created from small modification of jZebra example. Note that information status as seen on above picture is based on AJAX, I decide to modified the source & use AJAX rather than manual common button (Detect Printer) for ease-of-use & compact source only. Below source define small part of index.html where I attach JavaScript main function:
...
<script type="text/javascript" src="js/jzebra.js"></script>
<body onLoad="detectPrinter()">
…
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr> <td colspan="2" bgcolor="#000000"><span id="printerStatusBar">Loading...</span></td></tr>
<tr> <td width="47%"><form name="form1" method="post" >
String untuk dicetak<br>
<textarea name="struk" cols="50" rows="7" id="struk"></textarea>
<br><input name="button" type=button onClick="printStruk(form1.struk.value)" value="Test Cetak">
<input name="button2" type=button onClick="print64()" value="Test Cetak (Base64)">
<input type="reset" name="Reset" value="Reset"></form></td>
<td width="53%">
<applet name="jZebra" code="jzebra.RawPrintApplet.class" archive="js/jzebra.jar" width="100" height="100">
<param name="printer" value="zebra">
<param name="sleep" value="200"></applet></td></tr></table>
…
While here below is the core of JavaScript function:
function detectPrinter()
{
var applet = document.jZebra;
if (applet != null)
{
applet.findPrinter("zebra");
while (!applet.isDoneFinding())
{
// Wait
}
var ps = applet.getPrintService();
if (ps == null) var info="Printer belum siap";
else var info="Printer \"" + ps.getName() + "\" siap";
}
else
var info="Java Runtime belum siap!";
document.getElementById("printerStatusBar").innerHTML=info;
window.setTimeout('detectPrinter()',5000);
}
function printStruk(str)
{
var applet = document.jZebra;
if (applet != null)
{
// Plain Text
str=returnEnter(str);
applet.append(str);
// Send to the printer
applet.print();
while (!applet.isDonePrinting())
{
// Wait
}
var e = applet.getException();
if (e == null) var info="Printed Successfully";
else var info="Error: " + e.getLocalizedMessage();
}
else
{
var info="Printer belum siap";
}
document.getElementById("printerStatusBar").innerHTML=info;
}
function returnEnter(dataStr)
{
return dataStr.replace(/(\r\n|\r|\n)/g, "\n");
}
From the above picture, the example page now contains a textarea input. This purposed for user to print what they enter on it. So that this prototype will more flexible to use, since each of HTML page only embedding the JavaScript core function when custom specified page need the RAW printing function. Have a good try & share your comment below.
Labels: AJAX, JavaScript, PHP, Printing, Programming, Web Programming
| PS: If you've benefit from this blog, you can support it by making a small contribution. |
Wednesday, November 03, 2010 12:06:00 AM
Excellent explanation ..
thank you
Java applets are awesome
Saturday, November 20, 2010 1:24:00 PM
@Paparadit: Your tutorial is great. Would you be interested in becoming a contributor to the wiki pages?
-Tres
Saturday, November 20, 2010 4:59:00 PM
Mr. Tres,
Thanks for your comment on my blog. As your invitation, no big deal for me to become a contributor for jZebra. So, what is the first thing I should do?
Tuesday, December 07, 2010 7:44:00 PM
nice work :)
how can i print like jpg,gif and pdf files ?
Tuesday, December 07, 2010 11:30:00 PM
Faisal,
RAW print method using jZebra only purposed to drawing ASCII character via ESC/P commands & compatible to such dot matrix & thermal printer (auto-cut just like queues system or parking system) which is only printing text (not image).
Saturday, January 22, 2011 10:11:00 PM
@Faisal: Future versions may support jpg, png, pdf. Gif has animation and may not be supported. Please put a feature request in at http://code.google.com/p/jzebra/issues/list
Thursday, March 10, 2011 10:55:00 PM
I use this flyer printer to have all my flyers printed.
Tuesday, March 06, 2012 4:15:00 PM
Halo Mas Eko...
Klu gk keberatan boleh minta source code nya? terima kasih
Wednesday, July 11, 2012 11:06:00 PM
file Jzebra.js nya ambil dimana pak Eko?
Thursday, July 12, 2012 10:36:00 PM
@candra: file jZebra.js itu custom made saja. Disesuaikan dengan kebutuhan :)
Tuesday, March 26, 2013 9:59:00 PM
wah bagus sekali mas eko. tapi gmana caranya ya kalau printnya di server, jadi pas client click print. di server ke print, bukan di clientnya..
terimakasih..
Saturday, March 30, 2013 12:41:00 AM
@Maulana Yusuf: Untuk native, bisa cek di http://www.php.net/manual/en/ref.printer.php
Friday, June 28, 2013 10:40:00 PM
maaf pak, mau tanya, apakah load zebranya harus berulang-ulang yah, agar bisa print, sebab saya coba jalankan hanya sekali printnya, begitu saya coba print lagi tidak bisa,
mohon arahannya,
terima kasih
Tuesday, July 16, 2013 5:32:00 PM
@ekaperintis: Load & print jZebra bisa berulang kali. Coba cek kode-nya, mestinya ada yg kurang benar.
Wednesday, July 31, 2013 12:26:00 AM
Sudah berhasil pak, dan sukses melakukan cetak data tanpa harus load jZebranya secara berulang2,,,
Sekarang saya ada kendala di cetak gambar dengan jZebra, apakah ada trik khusus untuk mencetak image tersebut pak ???
Wednesday, January 15, 2014 10:50:00 AM
halo mas eko, saya ingin bertanya mengenai jzebra ini.
saya menggunakannya juga untuk media print, tetapi bagaimana di jzebra itu menggunakan setOrientation("landscape"), tujuannya agar hasil print itu landscape mas ?
terimakasih.
Tuesday, March 18, 2014 12:29:00 PM
mas Eko, boleh saya minta tutorialnya dalam bahasa indonesia?
Wednesday, November 05, 2014 5:08:00 PM
Mas Eko mau tanya, hasil print dari file pdf kok tidak sempurna font nya ya.. patah2.mohon pencerahanya
Monday, March 21, 2016 11:31:00 PM
Please feel free to post questions directly to the mailing list, qz-print@googlegroups.com.
Saturday, March 26, 2016 9:21:00 PM
Thank you, Tres... This blog is not maintained anymore since... August 2013 - WTF! :)
I still do love to blogging, but... you know, now I don't have much more time to writing - even for a single article in a month! So, stay keep up the good work, Tres and hail to QZ!