How to Print Receipts with Thermal Printer in Electron

Printing receipts is an essential part of many businesses, especially those in the retail and hospitality industries. While building Electron App, We have a very powerful package: Electron-pos-printer

A customizable electron.js printing plugin specifically designed for thermal receipt printers. It supports 80mm, 78mm, 76mm, 58mm, 57mm, and 44mm printers. It currently supports versions of electron >= 6.x.x

Here are the steps of setting up and using it to print receipts in Electron:

1. Install electron-pos-printer using npm:

npm install electron-pos-printer

2. Go to your Render File in Electron and write the below code to get the list of all printers:

const electron = require('electron')
// Importing BrowserWindow from Main
const window = electron.BrowserWindow;

// Get List of Printers
let printWindow = window.getFocusedWindow();
let list = await printWindow.webContents.getPrintersAsync();
console.log('list of Printers', list);

3. In the same file or a new file(If you create a new file, You have to import this file in the render file above), Write below code to send print data to the Printer:

const {PosPrinter} = require("electron-pos-printer");

const options = {
    preview: false, // Preview in window or print
    margin: "0 0 0 0", // margin of content body
    copies: 1, // Number of copies to print
    printerName: printerName, // printerName: string, check it at webContent.getPrinters()
    timeOutPerLine: 400,
    silent: true,
    pageSize: '80mm'
};

const data = [
  {
    type: "text", // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
    value: "HEADER",
    style: {fontSize: "18px", textAlign: 'center' },
  },
  {
       type: 'text', // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
       value: 'Secondary text',
       style: {textDecoration: "underline", fontSize: "10px", textAlign: "center", color: "red"}
  },
  {
    type: "image",
    path: path.join(__dirname, "assets/img_test.png"), // file path
    position: "center", // position of image: 'left' | 'center' | 'right'
    width: "auto", // width of image in px; default: auto
    height: "60px", // width of image in px; default: 50 or '50px'
  },
  {
        type: 'table',
        // style the table
        style: {border: '1px solid #ddd'},
        // list of the columns to be rendered in the table header
        tableHeader: ['Animal', 'Age'],
        // multi dimensional array depicting the rows and columns of the table body
        tableBody: [
            ['Cat', 2],
            ['Dog', 4],
            ['Horse', 12],
            ['Pig', 4],
        ],
        // list of columns to be rendered in the table footer
        tableFooter: ['Animal', 'Age'],
        // custom style for the table header
        tableHeaderStyle: { backgroundColor: '#000', color: 'white'},
        // custom style for the table body
        tableBodyStyle: {'border': '0.5px solid #ddd'},
        // custom style for the table footer
        tableFooterStyle: {backgroundColor: '#000', color: 'white'},
   },
  {
    type: 'barCode',
    value: '023456789010',
    height: 40,                     // height of barcode, applicable only to bar and QR codes
    width: 2,                       // width of barcode, applicable only to bar and QR codes
    displayValue: true,             // Display value below barcode
    fontsize: 12,
  },
  {
    type: "text", // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
    value: '************************',
    style: { fontSize: "10px", textAlign: 'center', marginBottom: '10px'},
  },
];

if(data.printerName != ''){
  PosPrinter.print(data, options)
    .then(() => {})
    .catch((error) => {
    console.error(error);
  });
}

Check other Data options and Print Options available in this library here.

I tried other packages as well but this one is the best so far. Look into the several features it can provide and then decide whether it fits your next Electron project needs.

Let me know if you have any confusion or doubts or errors.

If you enjoyed this article, follow me on Medium and other Social Media for more stories about Programming, Productivity, and Technology.