Printing receipts from a JavaScript web application using a mobile ZQ300 printer

I have a mobile printer ZQ300 that needs to be integrated into a Web Application developed in JavaScript (Angular). In certain scenarios I need to print some receipts from the application. Can anyone share any examples or point me to some online resources that would describe how this is done? I have some experience with POS devices using the Microsoft POS for .NET library but that cannot be used in my scenario. I need to find a different solution.

Any help would be greatly appreciated.

TIA,

Eddie

Steven Si
First of all, it's

First of all, it's recommended to use ZebraDesigner for Developers 3 tool to design the receipt template in ZPL. The receipt template has 3 parts, the receipt header, the receipt body and the receipt footer. Each part is an independent ZPL scripts and can be saved in a separate file. For details of the receipt templates, check out the tool.

For a web app, I would assume that the ZQ300 Series printer is connected to a Wi-Fi. Then you could use a cloud-based print solution to print receipts in JavaScript. Check out the following article and the JavaScript demo for the cloud-based solution - SendFileToPrinter API. Hope this helps.

Vote: 
Vote up!
Vote down!

Points: 1

You voted ‘up’


Eddie Lascu
Hi Steven, thanks for your

Hi Steven, thanks for your reply. Allow me to give you more feedback about what I need to do. Our application is web-based, developed in Angular (a JavaScript framework). The website deployed in Azure Cloud will be accessed from iPads. The users that use the iPads are connecting to the ZQ300 mobile printer via Bluetooth. If you are suggesting that connecting the ZQ300 printer to the WiFi may be easier, I could perhaps look into whether that is feasible in our case.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Steven Si
Hi Eddie,

Hi Eddie,

For a hybrid approach, you would have to create an iOS app, in which you use Link-OS SDK for iOS to connect to ZQ320 print through the native code and use WKWebView to connect to your webserver (or website) through JavaScript.

Attached Xcode project is a proof of concept. It uses WKScriptMessageHandler to bridge between JavaScript & the native. The index.html & jsfunctions.js are in html_javascript folder in the Xcode project. The ViewController.h & ViewController.m illustrates how this is done. There are only a few lines of code, just to show how to pass the data between JavaScript and the native. The example project uses hardcoded printer serial number, which you need to replace it with your printers serial number. The screenshot is below. Hope this helps.

Vote: 
Vote up!
Vote down!

Points: 1

You voted ‘up’


Eddie Lascu
Hi Steven,

Hi Steven,

Thanks for your reply. This approach seems very complex and it would put us in great difficulty because we do not have a lot of time at our disposal and no native iOS development expertise available in-house. I tried something else: I connected the printer to my Windows 10 laptop and, after the initial driver installation (handled automatically by Win10) I can now see the ZDesigner ZQ320 (CPCL) option in my list of printers. If I can create the receipt I want to print as a .PDF file with custom size (the width being 75 mm, as the paper in the printer is 78 mm wide and the length being whatever we need it to be, given how long the receipt is) I can send that to the printer.

Would this same approach work on an iPad? I paired the printer with the iPad, using your Zebra Printer Setup app, but the printer will not show up if I went to print something on the iPad. I do not have a cable to connect the printer to the iPad, so I cannot test to see if that would help, hence my question to you.

We have the ability to create a report that can be exported as a .PDF file and, presumably, we can even create it with appropriate sizes (75 mm wide x 250 mm long). If we can print that directly from the iPad while the tablet is connected to the printer via the cable, that will save our day.

Can you please clarify if this approach would work?

Thanks,
Eddie

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Steven Si
Unfortunately, Printer Setup

Unfortunately, Printer Setup Utility for iOS is meant a tool for configuring Zebra printers from an iOS device. Though it has the function to send a file to the printer, it would be user unfriendly in this scenario, because your JavaScript app has to create the PDF file and store it somewhere on the iPad, then the user has to switch to Printer Utility app to find the PDF file to send. This is not a solution you want for your customer. If the cloud-based approach is not a solution, the native or hybrid is the only other approach. You may want to explore if there are any other types of hybrid approaches, such as call the native API from JavaScript or from React.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Log in to post comments