Printing with Epson ePOS SDK in React App

68 | setPrinterIPAddress(e.currentTarget.value)} 73 | /> 74 | setPrinterPort(e.currentTarget.value)} 79 | /> 80 | 86 | {connectionStatus} 87 |

88 |

setTextToPrint(e.currentTarget.value)}
 94 |       />
 95 |       <button
 96 |         disabled={connectionStatus !== STATUS_CONNECTED}
 97 |         onClick={() => print(textToPrint)}
 98 |       >
 99 |         Print
100 |       </button>
101 |     </div>
102 |   );
103 | };
104 | 
105 | export default ThermalPrinter;
106 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Epson ePOS SDK with React JS
  2 | 
  3 | Printing from React JS in Epson thermal printer using the Epson ePOS SDK for Javascript.
  4 | 
  5 | Printing from a web app looks pretty straightforward, just call the `window.print()` method, and that's it. But that approach has some drawbacks:
  6 | 
  7 | - 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)
  8 | - It will show the user a print dialog, which the user needs to complete in order to begin the printing
  9 | - The printing will be a graphical representation of the page
 10 | - The client device must have installed the printer drivers
 11 | 
 12 | 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 an important impact to performance and productivity:
 13 | 
 14 | - Requiring a printer view, could distract the user or lose the current information they're working with.
 15 | - Showing the printer dialog demands user extra actions and slows the process of getting the printing.
 16 | - 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 built for max performance.
 17 | - Requiring an installed driver on the client device, is a huge challenge for mobile users and limits application adoption.
 18 | 
 19 | So, the **goals** for this project are:
 20 | 
 21 | - Printing without changing what the users is looking at. Printing on background, automatically and without showing any dialog.
 22 | - Printing raw to reach the maximum printer performance and reduce network traffic.
 23 | - Don't need any installed printer driver, and use network connection to the printer, so don't need to physically connect the device to the printer.
 24 | 
 25 | ## Epson ePOS SDK for JavaScript
 26 | 
 27 | 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.
 28 | 
 29 | 1. Download the SDK: [https://download.epson-biz.com/modules/pos/index.php?page=single_soft&cid=6679&scat=57&pcat=52](https://download.epson-biz.com/modules/pos/index.php?page=single_soft&cid=6679&scat=57&pcat=52)
 30 | 
 31 | 2. Unzip the SDK and copy the `epos-2.17.0.js` file to your project under the `public` folder.
 32 |    ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy55udce1lnwz3zw3wg5.png)
 33 | 
 34 | 3. Reference the script
 35 |    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.
 36 | 
 37 | ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykkmxw6nqlzzjrawdzhd.png)
 38 | 
 39 | ## Printing
 40 | 
 41 | Printing to a network printer is like any other communication process, connect to the device and send the requests.
 42 | 
 43 | ### Connect to the printer
 44 | 
 45 | The `connect` function opens the connection with the printer and keeps it open for further printing.
 46 | 
 47 | ```javascript
 48 | let ePosDev = new window.epson.ePOSDevice();
 49 | ePosDevice.current = ePosDev;
 50 | 
 51 | ePosDev.connect(printerIPAddress, printerPort, (data) => {
 52 |   if (data === "OK") {
 53 |     ePosDev.createDevice(
 54 |       "local_printer",
 55 |       ePosDev.DEVICE_TYPE_PRINTER,
 56 |       { crypto: true, buffer: false },
 57 |       (devobj, retcode) => {
 58 |         if (retcode === "OK") {
 59 |           printer.current = devobj;
 60 |           setConnectionStatus(STATUS_CONNECTED);
 61 |         } else {
 62 |           throw retcode;
 63 |         }
 64 |       }
 65 |     );
 66 |   } else {
 67 |     throw data;
 68 |   }
 69 | });
 70 | ```
 71 | 
 72 | ### Send information to the printer
 73 | 
 74 | Once the connection to the printer is open, just have to send what you want to print. The `print` function does it:
 75 | 
 76 | ```javascript
 77 | const print = (text) => {
 78 |   let prn = printer.current;
 79 |   if (!prn) {
 80 |     alert("Not connected to printer");
 81 |     return;
 82 |   }
 83 | 
 84 |   prn.addText(text);
 85 |   prn.addFeedLine(5);
 86 |   prn.addCut(prn.CUT_FEED);
 87 | 
 88 |   prn.send();
 89 | };
 90 | ```
 91 | 
 92 | ### Design your ticket
 93 | 
 94 | 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 ](https://reference.epson-biz.com/modules/ref_epos_sdk_js_en/index.php?content_id=1#BHIDAHEE)
 95 | 
 96 | 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`
 97 | 
 98 | ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e55qxhblsjosk55fdmfs.png)
 99 | 
100 | 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:
101 | 
102 | ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi8993afcuze7t4s009h.png)
103 | 
104 | You can get the code from the `print()` method.
105 |

--------------------------------------------------------------------------------