In this post I will show you how to print a receipt in a thermal printer directly from web browser, without user interaction and confirm dialogs, by using a free plugin.
Step 1: download the plugin
You have to download the plugin, it’s for free, just go to the docs. If it asks you for firewall permission allow it, it is not a malicious file.
Step 2: the javascript library
In your project, include the JavaScript library called Impresora.js. You can download it from the GitHub repo, or from the docs.
When you include the library, the classes OperacionTicket
and Impresora
will be available.
Step 3: set up default printer
Here you can use the setImpresora
method (call it with a printer obtained from getImpresoras
), or go to the examples and use the buttons.
Step 4: hello, thermal printer
Now you can create a new Impresora
instance:
let impresora = new Impresora();
The class constructor accepts a distinct URL if you want to provide an IP or if I change the port in the future, you are not forced to indicate the URL, by defualt it is localhost:8080
Once you have the instance, you can, for example, call the write
method and finally the end
method.
When the promise is resolved you should get a ticket printed in your thermal printer, if not, check the docs again and make sure you followed all the steps.
Remember: you can check all the examples source code.
Example: plugin capabilities
We will get a ticket like this, where we can set the font, alignment and some other things:
The code is as follows:
Once we have an Impresora
instance we can call write
, setFont
, feed
, cut
, cutPartial
, setFontSize
and finally end
.
Now you can use your thermal printer and create awesome receipts.
9 Comments
rameez · September 8, 2020 at 10:59 am
i want to use the premium plugin, is that working the Xprinter 600 0 series, please confirm even its a demo mode still fine to make sure its working i tried demo above The printer has not been set, either because the action has not been performed or because there are no valid printers, remember that if you want to print ,first you must set the printer, and then try to print got this error
parzibyte · September 8, 2020 at 11:53 am
Hi. If it works with the free version, it will work with the premium one
Murtuza · June 30, 2020 at 1:46 am
Hi Parzibyte,
Nice article, but do you have example in Angular? I am trying to open your example in my chrome browser. It brings the list of all printers available in my machine, but unfortunately when I click on set as default printer it gives me error as cannot set the default printer, I have followed all the steps (installed plugin, share the printer etc.)
https://parzibyte.github.io/plugin-ticket-js/en/examples/simple/index.html.
your quick response is highly appreciated.
Thanks and regards
Murtuza
shah · January 29, 2020 at 6:53 pm
It gives me the following error Response: Error en el servidor: sql: no rows in result set
parzibyte · January 29, 2020 at 7:52 pm
Please refer to the faq: https://parzibyte.github.io/plugin-ticket-js/en/#faq
Thanks 🙂
Zulqarnain Majeed · January 20, 2020 at 11:11 am
it keeps telling me connection refused to localhost 8000 I tried changing to 8080 but still the same, how do I go about it.
parzibyte · January 21, 2020 at 2:03 pm
Could you please provide an example about the error? thanks
Zulqarnain Majeed · January 20, 2020 at 9:58 am
Your source code, for example, is not in English which makes it bit difficult to understand it can you please upload an English version if it’s not too much trouble.
parzibyte · January 21, 2020 at 2:03 pm
Hello. I’m sorry but i can’t translate the code, only the explanation. I guess that if you know how to code, the variable names do not matter.
Regards 🙂