In this blog, I am describing to implement USB Printer in react native Application. it is the toughest task to implement printer in our Application. I have learned many libraries and found a library “react-native-usb-printer” that supports for Android Platform. It is very easy to use. It detects all connected USB Printer to our device if we got All Printer select one of them as a default Printer.
How to install it?
Installation-
|
1 |
npm install react-native-usb-printer --save |
Integrate Module-
To integrate react-native-usb-printer with the rest of your react app just execute:
|
1 |
react-native link react-native-usb-printer |
How to use?
Import-Module-
|
1 |
import { RNUSBPrinter } from 'react-native-usb-printer'; |
Find Printer Devices & Connect one of them-
|
1 2 3 4 5 6 7 8 9 |
let devices = await RNUSBPrinter.getUSBDeviceList(); console.log("Devices", devices); if (devices && devices.length > 0) { let printedSelected = await RNUSBPrinter.connectPrinter( devices[0].vendor_id, devices[0].product_id ); } |
Generate Text for printing-
We have to Note that it print only text String that encodes in “encoding: ‘GBK’ ” System. It Provides it’s own format to print our text. There are following some formatted TAG that supports by this library.
- “<M> … </M>” – for Medium text.
- <CM> … </CM> – center align and Medium text.
- <C> …</C> – center alignment.
- <B> …</B> for bold text.
- many more tag.
Printing Text via Connected Printer-
By this library, we print our page by two types-
- Print Without Cut Page- By this type, we print our many texts in a single Page.
1RNUSBPrinter.printText('Hello') - Print With Cut Page – By this type, We print our text String on the page and then cut this page. Real life example- Printing Invoice for separate users
1RNUSBPrinter.printBillTextWithCut("<C>Hello</C>")
Printing Page Image-
Resources:-
https://www.npmjs.com/package/react-native-usb-printer
https://github.com/bondwp/react-native-usb-printer
20 comments
Thank you.
look your issue screenshot http://i.prntscr.com/jMd2qcffTd2OHj3RjUV6aA.png
For More detail for merging Android Manifest click here
Thanks for posting this in the above description you have mention “supports for Android Platform” so this library wouldn’t work for IOS devices / IOS platform?
1. Is it possible to print image on top of the receipt with this library.
2. Does it support printing HTML document.
3. How to align text to the extreme right in a string literal.
-> yes, in QR tag and pass image url
2. Does it support printing HTML document.
-> NO, it have self tag.
3. How to align text to the extreme right in a string literal.
-> by using starting spaces
Can we have an example of code to print an image on a receipt with this library.
this code prints text and not the image on the receipt.
vendor_id: 8578,
device_id: 2007,
device_name: ‘/dev/bus/usb/002/007’ },
{ product_id: 278,
vendor_id: 1561,
device_id: 2006,
device_name: ‘/dev/bus/usb/002/006’ } ]
I am getting this whether devices are attached or not?
Can you please share the code in which you are getting this response ?