DEV Community

Ruben Ruvalcaba
Ruben Ruvalcaba

Posted on

Printing tickets on ReactJS

Epson ePOS SDK with React JS

Project repository:

Printing from React JS in Epson thermal printer using the Epson ePOS SDK for Javascript.

Printing from a web app looks pretty straight forward, just call the window.print() method, and that's it. But that approach has some drawbacks:

  • You'll require to create a view of what you want to print (and/or use some printing specific CSS to achieve a proper presentation)
  • It will show the user a print dialog, which the user needs to complete in order to begin the printing
  • The printing will be a graphical representation of the page
  • The client device must have installed the printer drivers

For many scenarios, the above is not so bad. But in a high demand environment (like in a POS application) each one is a drawback that becomes a very important affection to performance and productivity:

  • Requiring a printer view, could distract the user or loose the current information they're working with.
  • Showing the printer dialog demands user extra actions and slows the process of getting the printing.
  • Printing graphical demands more network traffic, the printing is slower and doesn't get the maximum printer speed. Raw printing is what POS printers are build for max performance.
  • Requiring an installed driver on the client device, is a huge challenge for mobile users and limits application adoption.

So, the goals for this project are:

  • Print without changing what the users is looking at. Print on background, automatically and without showing any dialog.
  • Print raw to reach the maximum printer performance and reduce network traffic.
  • Don't need any installed printer driver, and use network connection to the printer, so don't need to phisically connect the device to the printer.

Epson ePOS SDK for JavaScript

This SDK provides a communication solution between JS and the printer, for a wide number of POS printers models. My solution is based on using this SDK.

  1. Download the SDK:

  2. Unzip the SDK and copy the epos-2.17.0.js file to your project under the public folder.

  3. Reference the script
    As the SDK is not designed to be used on strict mode, to be included in a React app, need to be referenced on public/index.html file.



Printing to a network printer is like anyother communication processs, connect to the device and send the requests.

Connect to the printer

The connect function opens the connection with the printer and keeps it open for further printing.

let ePosDev = new;
ePosDevice.current = ePosDev;

ePosDev.connect(printerIPAddress, printerPort, (data) => {
  if (data === "OK") {
      { crypto: true, buffer: false },
      (devobj, retcode) => {
        if (retcode === "OK") {
          printer.current = devobj;
        } else {
          throw retcode;
  } else {
    throw data;
Enter fullscreen mode Exit fullscreen mode

Send information to the printer

Once the connection to the printer is open, just have to send what you want to print. The print function does it:

const print = (text) => {
  let prn = printer.current;
  if (!prn) {
    alert("Not connected to printer");


Enter fullscreen mode Exit fullscreen mode

Design your ticket

The SDK provides a lot of methods (addText, addFeedLine, etc.) to print and use the printer capabilities. Here you can check the available SDK methods

The easier way to design your ticket is using the SDK included designer. In the SDK folder just navigate to the /ReceiptDesigner/index.en.html


On the 'Edit' tab you can add commands to build your format, and on the 'API' tab you'll get the code to print the format:


You can get the code from the print() method.

Top comments (1)

godpandarinas profile image

Hey there! If you're looking to print tickets using ReactJS, there are several libraries and approaches you can consider to achieve your goal. ReactJS is a popular JavaScript library for building user interfaces, and with the right tools, you can generate and print tickets seamlessly. One approach you can take is to use a combination of ReactJS and a client-side printing library. React-to-print is a commonly used library that allows you to create a printable component in React and then print it directly from the browser. You can design your ticket template using React components, and React-to-print provides a simple API to trigger the printing functionality. It's worth noting that for more complex printing requirements, such as barcodes or advanced formatting, you may need to consider integrating with specialized software or libraries. For example, if you're dealing with medical device labeling and require specific compliance features, you might want to explore medical device labeling software. Medical device labeling software is designed to meet the unique requirements and standards of the medical device industry, ensuring accurate and compliant labeling.