We're developing software to connect with Zebra printers on React web application. But we couldn't be successful at this and the zebra sources are outdated!
We couldn't use their SDK because it was outdated and when I imported that webpack gave us so many errors that couldn't pile that code. I'm using this SKD wrapper now:
I'm getting network error when I'm trying to print using zebra printer.
instrument.ts:159 GET http://localhost:9100/available net::ERR_BLOCKED_BY_CLIENT
Error: TypeError: Failed to fetch
at o.<anonymous> (21.5eb25857.chunk.js:sourcemap:2:2238456)
at 21.5eb25857.chunk.js:sourcemap:2:2237749
at Object.throw (21.5eb25857.chunk.js:sourcemap:2:2237854)
at c (21.5eb25857.chunk.js:sourcemap:2:2236607)
I'm using the sample code in the NPM js package that I've shared.
Zebra software and devices are configurated and working but it doesn't work when I'm trying to connect to it using web application.
Does anyone know how to work with it?
We're developing software to connect with Zebra printers on React web application. But we couldn't be successful at this and the zebra sources are outdated!
We couldn't use their SDK because it was outdated and when I imported that webpack gave us so many errors that couldn't pile that code. I'm using this SKD wrapper now: https://www.npmjs./package/zebra-browser-print-wrapper
I'm getting network error when I'm trying to print using zebra printer.
instrument.ts:159 GET http://localhost:9100/available net::ERR_BLOCKED_BY_CLIENT
Error: TypeError: Failed to fetch
at o.<anonymous> (21.5eb25857.chunk.js:sourcemap:2:2238456)
at 21.5eb25857.chunk.js:sourcemap:2:2237749
at Object.throw (21.5eb25857.chunk.js:sourcemap:2:2237854)
at c (21.5eb25857.chunk.js:sourcemap:2:2236607)
I'm using the sample code in the NPM js package that I've shared.
Zebra software and devices are configurated and working but it doesn't work when I'm trying to connect to it using web application.
Does anyone know how to work with it?
Share Improve this question asked Jan 23, 2022 at 7:04 AmirAmir 611 silver badge7 bronze badges2 Answers
Reset to default 4There's a need to setup two things first is sdk for react app and second is PC/Mac application that need to be running. This application will expose end points need to be called. Currently it says your PC/MAC application is not running so localhost:9100 not found Check this doumentation https://www.zebra./content/dam/zebra_new_ia/en-us/solutions-verticals/product/Software/Printer%20Software/Link-OS/browser-print/zebra-browser-print-user-guide-v1-3-2-en-us.pdf
I haven't used the wrapper from NPM but it is possible to integrate that library straight into the react project.
My approach is just to download the Browser Print JavaScript Library from Zebra and import the script in the <head> of the html.
In addition, the device running the browser has to install a native SDK to pair with the printer and send mands. For example, if the web page is running on a chrome browser on Android, you must install the Browser Print SDK for Android on that mobile device first.
Steps:
- Download the Browser Print SDK and the Browser Print JavaScript Library, you will need to submit a request from their website
- Install the Browser Print App on your device and pair it with the printer
- After downloading the JS library, unzip the
zebra-browser-print-js-v30216.zipand copy the filesBrowserPrint-Zebra-1.0.216.min.jsandBrowserPrint-3.0.216.min.jsto your react project's/publicdirectory - If you are using Create React App, add the following to
<head>
...
<head>
<script src="%PUBLIC_URL%/BrowserPrint-Zebra-1.0.216.min.js" />
<script src="%PUBLIC_URL%/BrowserPrint-3.0.216.min.js" />
</head>
...
- Use the device that has the SDK (for example, the Android phone that has installed the
Browser Print App) to visit the webpage - Then in the React ponent, you can use
window.BrowserPrintto access the library. - The phone will show up a notification to you to ALLOW or BLOCK the domain name to access the SDK, choose ALLOW then all is done
Screenshot: