Printing to TM-T88VI from an Azure Static App

Ruben Ruvalcaba — Thu, 22 Jul 2021 20:00:59 +0000

In my previous post explained how to print from a ReactJS using Epson POS SDK for JavaScript.

I implemented it into my React application, tested it in my local environment and everything went pretty well. The problem was when I published as a Static Web Application in Azure. From the Azure environment, it didn't print. I checked at the console and found out the following error message:

This error only doesn't happen on my local environment because my application was running over HTTP. Once it's published on Azure, now my application is loaded over HTTPS and the printer address call is through HTTP. This mixed content is not allowed by Chrome, nor any other modern browser (I tried on Safari, Edge and Firefox).

Googling the error message I've found the post https://stackoverflow.com/a/48700852/1167420 which suggest adding the following tag to the page:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

This directive will replace any HTTP request into an HTTP URL. It make sense, so I added the directive in the index.html file in the HEAD element:

I published again and it made it work, now the SDK url is through HTTPS:

Now the problem is the printer certificate (the factory default) is invalid:

So, I needed to regenerate the certificate and install it on the printer.

I've created the new certificate using the TM-T88VI Utility:

Go to Network/Detailed Settings/Certificate.
- Deleted the current certificate.
- Click on "Self-signed certificate" button. Enter in "Common Name" field the printer IP (make sure the printer has a static IP address). Click "Ok" then "Set", this will create the new self-signed certificate and push it to the printer.
Go to Network/Detailed Settings/SSL/TLS option and make sure to have the following settings:

Once you have a valid certificate installed in the printer, you should be able to print, but as the browser still untrusts the certificate.

You can trust on certificate for this session, clicking on "Advanced" button, and continue:

But for a permanent trust you'll need to install the certificate in your computer/device. To do so, you'll need to export the certificate, you can do this from the browser, clicking on the certificate window:

In Windows, go to details tab and clic on "Copy to File..." button, select "DER encoded binary X.590 (.CER)" format and select the destination for the exported file.
In MacOs, drag the certificate image to your desktop or any folder

Finally needed to install the certificate:

In windows, on start menu type "Manage computer certificates", select the "Trusted Root Certification Authorities" branch, then "All Tasks" and "Import..." and import the exported certificate.
In MacOs double click on the downloaded certificate, and in the keychain manager clic on "Trust" button.
In Android, copy the certificate to the device and open it. It'll ask for your credentials, type the printer's IP as the certificate name and select the "VPN and apps" option.

Printing tickets on ReactJS

Ruben Ruvalcaba — Fri, 25 Jun 2021 19:01:19 +0000

Epson ePOS SDK with React JS

Project repository: https://github.com/rubenruvalcabac/epson-epos-sdk-react

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.

Download the SDK: https://download.epson-biz.com/modules/pos/index.php?page=single_soft&cid=6679&scat=57&pcat=52
Unzip the SDK and copy the epos-2.17.0.js file to your project under the public folder.
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

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 window.epson.ePOSDevice();

ePosDevice.current = ePosDev;

ePosDev.connect(printerIPAddress, printerPort, (data) => {

  if (data === "OK") {

    ePosDev.createDevice(

      "local_printer",

      ePosDev.DEVICE_TYPE_PRINTER,

      { crypto: true, buffer: false },

      (devobj, retcode) => {

        if (retcode === "OK") {

          printer.current = devobj;

          setConnectionStatus(STATUS_CONNECTED);

        } else {

          throw retcode;

        }

      }

    );

  } else {

    throw data;

  }

});

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");

    return;

  }

prn.addText(text);

  prn.addFeedLine(5);

  prn.addCut(prn.CUT_FEED);

prn.send();

};

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.

DEV Community: Ruben Ruvalcaba