WebUSB - Print Image and Text in Thermal Printers

Burak Aybar

Ruby Developer

We use thermal printers daily like on restaurants, shops or kiosks, basically everywhere. Instead of using lots of different applications to print the receipt/ticket, it is nice to have just one application which can allow modifying styling too.

WebUSB allowed us to connect this wide usage device to the webpages in any Chrome/Firefox without requiring any installation! Here you are going to see how we can implement this portable solution that can print the details of your order together with your logo or any images in your application with only knowing javascript! Before going into details, at the end of the day, we will be able to print an image and text like the picture below.

Epson TM-T20II Thermal Printer [1]

WebUSB thermal printed image and text

What is a Thermal Printer?

Technically;

Thermal printing (or direct thermal printing) is a digital printing process which produces a printed image by selectively heating the coated thermochromic paper, or thermal paper as it is commonly known when the paper passes over the thermal print head. The coating turns black in the areas where it is heated, producing an image [2].

Basically;

A thermal printer is a printer that makes use of heat to produce the image on paper [3].

What does it mean WebUSB and Thermal Printers for Businesses?

In recent years, the time of implementation and prototyping possibilities have become crucial to the market, faster you launch to the market more opportunities you can get. To cope with that, web applications are trying to have more powerful APIs such as WebUSB, WebBluetooth and similar APIs to be able to compete with desktop and embedded applications. This kind of APIs enables us to increase the usage of web applications while developing products, and it brings some advantages such as platform independence, portability, and comprehensibility.

One of the examples of usage area of WebUSB is thermal printers. Due to the quality of the print, speed, and technological advances, it has become increasingly popular. These printers are widely used in supermarkets, libraries, restaurants, bars, transport industry, lottery and betting, kiosks, petroleum stations, POS systems and in the medical industry, such as heart monitoring machines, or geological engineering (it records the real-time images of subsurface activities and earthquakes). These are just a few broad examples of the usage of thermal printers. The list will be endless if you think of places that you get a receipt every day.

Let's Code Thermal Printer with WebUSB

As I discussed earlier, in the previous article, one of our projects needed to connect to the USB device through the browser. The traditional methods were not enough to tackle this requirement and brought many problems, such as insecureness and compatibility problems. That's why the WebUSB API has been created: to provide a way for websites to connect to users' USB devices.

For the project, which I have been working on, not only connecting the USB device on the browser was required, but also you had to upload the various logos and give a command to the thermal printer to print this logo. That could be very challenging to maintain this kind of printers.

If you're not sure what ESC/POS commands are, check out my previous article explaining the protocols for printing an image and text on thermal printers.

How about printing a text on Thermal Printer?

Actually, printing a text is easier than printing an image. Here, we have simply split the sentence to the characters, then we have converted to decimal format.

Easy, right?

Once you have constructed your array of decimal representations for your image or text with command codes, you simply need to call the function for transferring the data to the thermal printer:

If you're not sure what a device is, check out my previous article explaining the printing the data on thermal printers via WebUSB.

Summary

In this blog post, I have introduced how to print text and images in thermal printers via WebUSB. In the beginning, we understood what is a thermal printer, and then we saw how this plays an important role for businesses. Finally, we finished with practising by programming with a fully working implementation of printing an image and text in Javascript.

It's already in production and battle-tested with thousands of different visitors, devices, locations every week. Join the journey!

If you're interested in more blog posts like this, please visit our Visuality Blog or our Medium Page