In this post I will introduce to you a plugin for printing tickets, receipts or invoices on a thermal printer using client-side JavaScript even if your web page or application is on a cloud server.

This plugin allows you to print directly from browsers, without dialogs and without browsers compatibility issues because you only have to send a HTTP request to print silently and in the background.

As we know, printing a ticket with JavaScript, CSS & HTML is possible, but difficult for the end user, because you have to select the printer and confirm the printing.

Another disadvantage of printing with JavaScript without a plugin is that we cannot cut the paper, open the cash drawer or things like that.

That’s why I created the solution to the problem and I come to expose it. And no, it is not a misleading post.

A free plugin for printing in thermal printers directly from browser

That is why I have decided to create a plugin to print with JavaScript, without any dependency and using pure JavaScript client side.

If you want to jump to the examples or download the plugin, go to the docs.

What comes next are technical details of how the plugin works.

Sordid details following…

How does it work?

The operation is simple. The plugin, which is an executable, creates a web server on port 8080 (which only lives while the plugin is running) and listens for requests.

The plugin, unlike JavaScript, can interact with the user’s computer, so you just tell it what to do over HTTP.

JavaScript is really good at making HTTP requests through, for example, fetch.

How does the plugin for thermal printers work

The plugin behaviour is best illustrated with the above image.

Because the plugin speaks HTTP, a ticket can be printed from any programming language that can communicate with the plugin.

The library

Not all tickets are the same, and that is why I had to create a way to make the user print and modify editable and custom tickets.

To do this, I made an array where the actions are placed. Within the plugin I simply interpret them and send them to the printer.

Actions are an object that has “accion” (like write) and “datos”, which is the data used for the action.

It looks best illustrated in this class:

Both things, “accion” and “datos”, are converted to string.

All these actions are added to an array; through the methods that the Impresora class exposes:

This class simply tries to validate the data a bit, but in the end, what is sent in the end method is an array of objects.

On the server side that is also validated, and that’s all.

TODO list

Minify the library, detect bugs, and so on.

Remember that this is a technical explanation, you can see the examples in the official docs.

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

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Join 6,525 other subscribers


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


Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

%d bloggers like this: