JavaScript

Print ticket in thermal printer directly from browser

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 next link:

https://github.com/parzibyte/plugin-impresora-termica-v3/releases/latest

If it asks you for firewall permission allow it, it is not a malicious file.

Step 2: share your printer

Step 3: the javascript library

In your project, include the JavaScript library called ConectorJavaScript.js. You can download it from the GitHub repo, or from the docs.

When you include the library, the classes Operacion and ConectorPluginV3 will be available.

Step 4: hello, thermal printer

Now you can create a new ConectorPluginV3 instance:

let conector = new ConectorPluginV3(null, "optional license");

The class constructor accepts a distinct URL if you want to provide a different port in the future, you are not forced to indicate the URL, by defualt it is localhost:8000.

Once you have the instance, you can, for example, call the EscribirTexto method (to write text) and finally the imprimirEn method passing the printer’s name.

See the gist on github.

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.

If it returns true, then it was successfull, if it does not, then the error message will be in the result variable.

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:

Plugin capabilities – Thermal printer ESC POS

The code is as follows:

See the gist on github.

Once we have an ConectorPluginV3 instance we can call EscribirTexto to write simple text, Feed to feed paper, Pulso to open cash drawer, ImprimirCodigoDeBarras to print barcode, Corte to cut paper, EstablecerAlineacion to align and finally imprimirEn to print it in the printer we pass as argument.

Now you can use your thermal printer and create awesome receipts. The full docs are here:  https://gist.github.com/parzibyte/2f36655ef9d6ea8e6de73c6e09bbc735#file-documentacion-txt

Remember that once you have the plugin running and your printer shared, you can try the demos: https://parzibyte.github.io/ejemplos-javascript-plugin-v3/hola.html and check the source code: https://github.com/parzibyte/ejemplos-javascript-plugin-v3/


I am available for hiring if you need help! I can help you with your project or homework feel free to contact me.
If you liked the post, show your appreciation by sharing it, or making a donation

parzibyte

Freelancer programmer ready to work with you. Web, mobile and desktop applications. PHP, Java, Go, Python, JavaScript, Kotlin and more :) https://parzibyte.me/

Ver comentarios

  • 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

  • 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

  • it keeps telling me connection refused to localhost 8000 I tried changing to 8080 but still the same, how do I go about it.

  • 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.

    • 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 :)

Compartir
Publicado por
parzibyte

Entradas recientes

Receipt designer for thermal printers – Free and open source

In the last months I have been working on a ticket designer to print on…

4 months hace

JavaScript: store and read files with the Origin Private File System

In this post you will learn how to use the Origin Private File System with…

7 months hace

JavaScript: download file with fetch

In this post you will learn how to download a file in the background using…

7 months hace

SQLite3 with vanilla JavaScript and OPFS – Hello world

In this post I will show you how to use SQLite3 directly in the web…

9 months hace

Python Thermal Printing: A Comprehensive Guide for Printing on Thermal Printers

In this tutorial, we'll explore how to effortlessly print receipts, invoices, and tickets on a…

10 months hace

Image printing on Thermal printer

When printing receipts on thermal printers (ESC POS) sometimes it is needed to print images…

10 months hace

Esta web usa cookies.