hubertformin / electron-pos-printer

Electron-pos-printer is a plugin that works to ease paper formatting and printing to thermal printers. it currently supports 80mm, 78mm, 76mm, 58mm, 57mm and 44mm printers thermal printers. it is built with Electron.js and Node.js

Electron-pos-printer

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

Installation

$ npm install electron-pos-printer
$ yarn add electron-pos-printer

Demo

Check out this Demo by fssonca

Usage

In main process

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

In render process

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

Electron >= v10.x.x

const {PosPrinter} = require('@electron/remote').remote.require("electron-pos-printer");

Example code

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

const options = {
    preview: false,
    margin: '0 0 0 0',
    copies: 1,
    printerName: 'XP-80C',
    timeOutPerLine: 400,
    pageSize: '80mm' // page size
}

const data = [
    {
        type: 'image',
        url: 'https://randomuser.me/api/portraits/men/43.jpg',     // file path
        position: 'center',                                  // position of image: 'left' | 'center' | 'right'
        width: '160px',                                           // width of image in px; default: auto
        height: '60px',                                          // width of image in px; default: 50 or '50px'
    },{
        type: 'text',                                       // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
        value: 'SAMPLE HEADING',
        style: {fontWeight: "700", textAlign: 'center', fontSize: "24px"}
    },{
        type: 'text',                       // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
        value: 'Secondary text',
        style: {textDecoration: "underline", fontSize: "10px", textAlign: "center", color: "red"}
    },{
        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: 'qrCode',
        value: 'https://github.com/Hubertformin/electron-pos-printer',
        height: 55,
        width: 55,
        style: { margin: '10 20px 20 20px' }
    },{
        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: 'table',
        style: {border: '1px solid #ddd'},             // style the table
        // list of the columns to be rendered in the table header
        tableHeader: [{type: 'text', value: 'People'}, {type: 'image', path: path.join(__dirname, 'icons/animal.png')}],
        // multi-dimensional array depicting the rows and columns of the table body
        tableBody: [
            [{type: 'text', value: 'Marcus'}, {type: 'image', url: 'https://randomuser.me/api/portraits/men/43.jpg'}],
            [{type: 'text', value: 'Boris'}, {type: 'image', url: 'https://randomuser.me/api/portraits/men/41.jpg'}],
            [{type: 'text', value: 'Andrew'}, {type: 'image', url: 'https://randomuser.me/api/portraits/men/23.jpg'}],
            [{type: 'text', value: 'Tyresse'}, {type: 'image', url: 'https://randomuser.me/api/portraits/men/53.jpg'}],
        ],
        // list of columns to be rendered in the table footer
        tableFooter: [{type: 'text', value: 'People'}, 'Image'],
        // custom style for the table header
        tableHeaderStyle: { backgroundColor: 'red', 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'},
    },
]

PosPrinter.print(data, options)
 .then(console.log)
 .catch((error) => {
    console.error(error);
  });

Typescript

Usage

import {PosPrinter, PosPrintData, PosPrintOptions} from "electron-pos-printer";
import * as path from "path";

const options: PosPrintOptions = {
   preview: false,
   margin: '0 0 0 0',    
   copies: 1,
   printerName: 'XP-80C',
   timeOutPerLine: 400,
   pageSize: '80mm' // page size
}

const data: PosPrintData[] = [
    {
        type: 'image',
        url: 'https://randomuser.me/api/portraits/men/43.jpg',     // file path
        position: 'center',                                  // position of image: 'left' | 'center' | 'right'
        width: '160px',                                           // width of image in px; default: auto
        height: '60px',                                          // width of image in px; default: 50 or '50px'
    },{
        type: 'text',                                       // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
        value: 'SAMPLE HEADING',
        style: {fontWeight: "700", textAlign: 'center', fontSize: "24px"}
    },{
        type: 'text',                       // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
        value: 'Secondary text',
        style: {textDecoration: "underline", fontSize: "10px", textAlign: "center", color: "red"}
    },{
        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: 'qrCode',
        value: 'https://github.com/Hubertformin/electron-pos-printer',
        height: 55,
        width: 55,
        style: { margin: '10 20px 20 20px' }
    },{
        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: 'table',
        style: {border: '1px solid #ddd'},             // style the table
        // list of the columns to be rendered in the table header
        tableHeader: [{type: 'text', value: 'People'}, {type: 'image', path: path.join(__dirname, 'icons/animal.png')}],
        // multi-dimensional array depicting the rows and columns of the table body
        tableBody: [
            [{type: 'text', value: 'Marcus'}, {type: 'image', url: 'https://randomuser.me/api/portraits/men/43.jpg'}],
            [{type: 'text', value: 'Boris'}, {type: 'image', url: 'https://randomuser.me/api/portraits/men/41.jpg'}],
            [{type: 'text', value: 'Andrew'}, {type: 'image', url: 'https://randomuser.me/api/portraits/men/23.jpg'}],
            [{type: 'text', value: 'Tyresse'}, {type: 'image', url: 'https://randomuser.me/api/portraits/men/53.jpg'}],
        ],
        // list of columns to be rendered in the table footer
        tableFooter: [{type: 'text', value: 'People'}, 'Image'],
        // custom style for the table header
        tableHeaderStyle: { backgroundColor: 'red', 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'},
    },
]

PosPrinter.print(data, options)
 .then(console.log)
 .catch((error) => {
    console.error(error);
  });

Printing options

Options	Required	Type	Description
printerName	No	string	The printer's name. If not set, the system's default printer will be used.
copies	No	number	The number of copies to print
preview	No	boolean	Preview print job in a window. Default is false
width	No	string	Width of a page's content
margin	No	string	Margin of a page's content. CSS margin values can be used Ex. 0 10px
timeOutPerLine	No	number	Timeout per line in milliseconds. Default value is 400
silent	No	boolean	To print silently without the system displaying the printer selection window. Default value is true
pageSize	No	PaperSize, SizeOptions	Configure the paper size which is supported by your printer. values are are 80mm, 78mm, 76mm, 58mm, 57mm, 44mm or object with width and height properties in pixels.
pathTemplate	No	string	Path to custom html template. Can be used for custom print styles.
header	No	string	Text to be printed as page header.
footer	No	string	Text to be printed as page footer.
margins	No	object	Page margins. See electron docs
landscape	No	boolean	Whether the page should be printed in landscape mode. Default is false.
scaleFactor	No	number	The scale factor of the web page.
pagesPerSheet	No	number	The number of pages to print per page sheet.
collate	No	boolean	Whether the page should be collated.
pageRanges	No	object[]	The page range to print. See electron docs
duplexMode	No	string	Set the duplex mode of the printed web page. See electron docs
dpi	No	object	See electron docs

The Print data object

Important!!

The css property is no longer supported, use the style property instead of css.
Example: style: {fontWeight: "700", textAlign: 'center', fontSize: "24px"}

Property	Type	Description
type	string	text, qrCode, barCode, image, table // type text can be an html string
value	string	Value of the current row
height	number	Applicable to type barCode and qrCode
width	number	Applicable to type barCode and qrCode
style	PrintDataStyle	Add css styles to line (jsx syntax) ex: {fontSize: 12, backgroundColor: '#2196f3}
displayValue	boolean	Display value of barcode below barcode
position	string	left, center, right applicable to types qrCode and image
path	string	Path or url to the image asset
url	string	Url to image or a base 64 encoding of image
tableHeader	PosPrintTableField[] or string[]	The columns to be rendered in the header of the table. Works with type table
tableBody	PosPrintTableField[][] or string[][]	The columns to be rendered in the body of the table. Works with type table
tableFooter	PosPrintTableField[] or string[]	The columns to rendered it the footer of the table. Works with type table
tableHeaderStyle	string	Set a custom style to the table header
tableBodyStyle	string	Set a custom style to the table body
tableFooterStyle	string	Set a custom style to the table footer

Contributors

Thanks to our contributors 🎉👏

• Hubert Formin
• Sidnei Pacheco
• Ulisses Constantini
• Famous Ketoma

electron-pos-printer's Issues

body-init error

require is not defined

Paper size

How can you determine a variable paper size?

As for example that of a POS document

Add font family

Hello,
How can I add font-family to print content I've tried :

   {
       type: 'text',
       value: 'Company Name',
       style: `text-align:center; font-size: 20px; margin: 0; padding-bottom: 10px;`,
       css: { 'font-family': 'Bahnschrift' },
    },

But after print I got default font family.
Please correct me if i am wrong. Thank

How do working in react & typescript environment?

Thank you for creating this great module.
Please Help me.
How can I make this package work in react & typescript environment?

using PosPrinter in renderer process throws error, cannot find module 'electron-pos-printer'

I imported PosPrinter in the renderer process of an electron app just the way it is stated in the demo and it threw an error " Cannot find module 'electron-pos-printer'". The snippet below shows what i did:

const PosPrinter = window.require("electron").remote.require("electron-pos-printer").PosPrinter;

i installed 'electron-pos-printer' in the renderer process of my app using npm.
i am using react in the renderer process.

How to use the cutter to cut the reciept

Add extra space at the end of the ticket

I need to add a margin at the bottom so it has an extra white space. I tried putting extra empty rows,   and other kind of tricks but I can't find a way...

with electron 12 this module not working

I tried with electron 9(it's working)but with electron 12 it not working.it shows timedOut error.I also increase timeOutPerLine.but it's not working

Printout Very Light

The printouts are very light, the fonts appear clearer and darker in the printout from a different source. Is there a parameter we can set this?

App crash when printer prints successfully

Printer prints successfully but the app is closing automatically. I couldn't get any error since its closing.

These are the options I am using!

const options = {
        preview: false,
        width: '100%',
        margin: '0 0 0 0',
        copies: 1,
        printerName: 'Caysn Thermal Printer',
        timeOutPerLine: 400,
        silent: true,
};

Error: Cannot find module 'electron-pos-printer' Require stack:

This is how I access electron-pos-printer :
`import React, { useEffect, useState } from 'react'
import { ProductListProp } from '../kasir/ProductListView'
import path from 'path';
import { Button, RadioGroup, RenderIf } from 'react-rainbow-components';

interface RadioValue {
value: string,
label: string
}

export const CheckoutStruk: React.FC<any & ProductListProp> = (props: any) => {

let { remote } = require("electron");

const { PosPrinter } = remote.require("electron-pos-printer");
`
It works well in development, but when I build for production, this happens :

Anyone face the same issue ?

Add option to give styles to the td of the tables

not working with zebra printer 420

const options = {
preview: true, // Preview in window or print
width: '170px', // width of content body
margin: "0 0 0 0", // margin of content body
copies: parseInt(quantity), // Number of copies to print
printerName: printerName, // printerName: string, check it at webContent.getPrinters()
timeOutPerLine: 400,
silent: true,
pageSize: { height:76, width: 113 }
};

const data = [
{
type: "barCode", // Do you think the result is ugly? Me too. Try using

an image instead...
value: ean13,
height: 12,
width: 1,
displayValue: true, // Display value below barcode
fontsize: 8,
},

];

above option not printing the correct bar code, quality of bar code is not correct

TimedOut Error

Working with quasar a vuejs framework PosPrinter retrurn TimedOut error

code in electron main
ipcMain.handle('posPrint', (_event, {data, posoptions}) => { PosPrinter.print(JSON.parse(data), posoptions) .then(() => {}) .catch(err => { console.log(err) }) });

Code in preload
contextBridge.exposeInMainWorld('serivcePrinterPrint', { print_service: (data: { data: PosPrintData, posoptions: PosPrintOptions }) => ipcRenderer.invoke('posPrint', data), })

Printing in a loop to automate

Hi thank you for the module it works nicely. I am running into some issues whilst calling the print function in a loop, in essence, I change the value of data.value and call print. It happens so quick that it doesn't overwrite the variable and prints only the first one.
I suppose a timer would do the trick but if there was a native way to delay it maybe I am missing something?
Here's some code to clarify:

function print(order) {
  const data = [
	{
      type: 'text',
      value: order.content,
        },
     ]

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

Calling the print() function

for(let order of content) {
print(order);
}

Any pointers will be highly appreciated!

Print preview is blank

I use vue and electron 13.0. And the printer preview is blank. I had passed the data into the posprinter.print() function. Can u please take a look? Thank u very much!

Printer Command to Kick Cashdrawer

Is there a way to pass printer command to kick cash drawer?

Copies property not working.

const options = {
preview: false, // Preview in window or print
width: 318, // width of content body
margin: "0 0 0 0", // margin of content body
copies: 2, // Number of copies to print
printerName: "58mm-thermal-printer", // printerName: string, check with webContent.getPrinters()
timeOutPerLine: 400,
silent: true,
};

set 'copies' to 2, but getting only 1.

not working as aspected.

electron-pos-printer shows timedout err

not updated the to context bridge isolation, could you please update with context bridge in preload with node integration false and context bridge isolation true

Cut paper after printing

Do you have any method for cutting the paper after printing? Without me having to pull the paper

Change Orientation

Is there anyway to change orientation of the contents? I would like to print to a receipt paper but the contents are printed on a landscape orientation. Thanks!

TimeOut

I print ten times like this
for(let i=0;i<10;i++){
console.log(i);
print();
}
The Printer successfully printed nine or ten receipt , but print callback shows error:TimeOut
PosPrinter.print(d, options)
.then(() => {
console.log("success");
})
.catch((error) => {
console.log("error==="+error);
});

Not print in production

Print is work in development version but not work in production version.
Can check preview page
my electron version is
"electron": "9.3.5",
my electron-pos-printer version is
"electron-pos-printer": "^1.2.4",

Does not work with Electron Vue

I get TimedOut even if applied the suggestion here
#2

Im using Electron Vue with https://nklayman.github.io/vue-cli-plugin-electron-builder/

See full gist here
https://gist.github.com/rnleal/3abce4ef3b762243b8097d2893970685

Get TimedOut Error In Electron 13 and React

Thank for developing this module, but i got time out error
Can you help me to fix this problem ?

Its possible print to network POS Printer?

is it possible to specify only the ip of the printer and print it?
In the documentation I see that the name can be specified but I do not know if it is possible to do it by ip

How could you print faster with the silent 'true "option?

Hello when "silent" is set to "false", printing is fast, when "true" is printing is slow. How could you print faster with the silent 'true "option?

Cash drawer

Hi, is there a way to pass null arguments so that the printer detects there is a new object to print so that the cash drawer opens but doesn't actually print? I tried to pass null arguments but the printer prints a small paper size. As always thanks!

ReferenceError: require is not defined

Hi, I am having a trouble where I can't print or preview the request

when printing it says "TimedOut" and when previewing the error in developer tools is
Uncaught ReferenceError: require is not defined at body-init.js:5

my electron webPreferences is
webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true, },

it seems the problem is with integration with electron 16 as fssonca's demo worked fine with me when upgrading to electron 16 it crashed.

Node: v16.13.1
electron: v16.0.2
electron-pos-printer: v1.2.4

Npm version update

Can you please update npm version to 1.2.2 so we can use pageSize property? Thanks!

how can I control the paper length of the print?

I want to print on a small sticker, how can I control the length of the print? I want to print one-fifth of the length of A4 paper

body { height: 100px; font-size: 12px; /*line-height: 24px;*/ }

I tried to modify the height of the body at pos.html, but it did not work

TimeOut rejection

it runs but in the preview shows blank page and returns error TimeOut

Uncaught Error: electron-pos-printer: use remote.require("electron-pos-printer") in render process in typescript

Want to use electron-pos-printer in render process

Import library

import { PosPrinter, PosPrintData, PosPrintOptions, } from 'electron-pos-printer';

So, How to import library in typescript

unable to print data using thermal printer

Hi,
Thanks for creating this package.
I'm able to see print preview but unable to print data on printer.
It just prints one blank line and stops.
I'm not sure why its not printing data. Also, it's not showing any error on console.

**webcontent.print** it self not working 
electron version: 9.4.0
node version: 14.15.1

I'm trying to print data on rendered process. Following sample code I'm trying to print data
const { PosPrinter } = require('electron').remote.require("electron-pos-printer")
const printdata = [
    { type: 'text', value: 'TextValue', style: 'text-align:left;font-weight: bold' },
    { type: 'barCode', value: 'HB4587896', width: 1, fontsize: 9, displayValue: true },
    {
      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: '',
      // custom style for the table body
      tableBodyStyle: 'border: 0.5px solid #ddd',
      // custom style for the table footer
      tableFooterStyle: ''
    }
  ]

    PosPrinter.print(printdata, {
      silent: true,
      printerName: 'Everycom-58-Series',
      preview: false,
      width: '100%', //  width of content body
      margin: '0 0 0 0', // margin of content body
      copies: 1, // The number of copies to print
      timeOutPerLine: 2000
    })
      .then(() => {
      // some code ...
      })
      .catch((error) => {
        console.error(error)
      })

The width property is not working (width of the paper)

The printer could not print "Preview" Windows 10

It works fine on my windows 10 but when i deployed on a client system, I see The printer could not print "preview".

Possibilty of print specific div element

I would like to know if there is a way to print a specific html div element brought it by a getElementById and use the HTML directly with the css designed for the app.
I tried to use it as I say, but it prints the entire code as an array of characters.

This is part of the code I wrote it in the renderer.js file to try to bring the div content.

const posTicket = document.getElementById('printable-div);
const tick = posTicket.innerHTML;

Then in the variable to set the content options I use it as this:

{
type: "text",
value: [...tick],
css: {
"font-size": "12px",
"font-family": "Helvetica",
},
},

So when I see the preview it gives me this:

Thanks for your help.

Timeout Error

Description

 const options = {
    preview: true, // Preview in window or print
    width: '170px', //  width of content body
    margin: '0 0 0 0', // margin of content body
    copies: 1, // Number of copies to print
    printerName: 'XP-80C', // printerName: string, check with webContent.getPrinters()
    timeOutPerLine: 400,
    pageSize: {height: 301000, width: 71000}, // page size
  };

As a user when i click on print button it shows TimeOut error.And when i inspected the error on preview window it shows
const fs = require('fs'); <--- require is not defined.
`

Error: Cannot find module 'electron-pos-printer', vue-electron

In my case I use Vue-electron, It works fine in case development mode
But this problem only appears in production mode...

Please add properties in PosPrintData

Hi.
Could you please add a property to the PosPrintData object
barcodeFormat?: string;
colspan?: number;
rowspan?: number;

and add attribute body-init.js file line:68

...
 jsbarcode-fontsize="${arg.line.fontsize ? arg.line.fontsize : 12}"
 jsbarcode-margin="0"
 --> jsbarcode-format="${arg.line.barcodeFormat ? arg.line.barcodeFormat : 'auto'}"
...

thanks.

pageSize property not working.

pageSize property not working

TimedOut

Hi i'm added windows printers to my printer and im use your example code then console says TimedOut
Pos Printers is TCP/IP

Page Size

Please assist me center the contents

const options = { preview: false, // Preview in window or print width: widthPage, // width of content body 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: { height: 75000, width: 100000 } };

How to place a table at the top right of the page

Hi, how to place a table at the top right of the page?

thank you for your time

Unhandled promise rejection

I noticed an issue with version 1.0.1. Printer prints successfully with an unhandled promise rejection instead. This issue would be fixed in v1.1.1

Demo code not working in latest version: electron 13.1.6 and electron-pos-printer^1.2.4

I am using electron 13.1.6 and electron-pos-printer^1.2.4.

It is not working in these version i tried with demo . I had changed nothing , only installed the dependencies with latest version instead of the old version which is mentioned in package.json !

But i degraded to those version , it is working fine !
And i make sure that node integration enabled true and tried so much stuffs ! But unable to overcome !

So fix the issues inorder to work properly in latest version .

Types on dist

on dist/models.d.ts
tableHeader, tableBody and tableFooter are no optionals
so it fails if i dont set these options

Unable to use PosPrint with Electron 12.

Unable to use PosPrint with Electron 12.
I have upgraded the demo with Electron 12 and it breaks.
Any suggestions to work with Electron 12. I am using Typescript and Angular 11.

I got Timeout in console.log on error catch

Need more documentation

Thank so much to the author. Help me a lot. But, in the began, this project didnt work for me . It's because the nodeIntegration: true, in main.js. But, i have a project for your guys: https://github.com/fssonca/electron-printer . Clone and enjoy.

Oh, one more thing: < meta > tags that come with the electron-quick-start. I disabled them because i got a lot of errors.

How to set Table Cell text alignment?

How to align the cell text to left or right? The code below does not yield to proper alignment even if I specified inside the style

{
    type: "table",
    style: {
        "text-align": "left",
    },
    tableBody: [
        ["Insurance", "P1200"],
        ["Service Fee", "P100"],
    ],
},