@plick/electron-pos-printer NPM

Plick Electron pos printer

A customizable electron.js printing plugin specifically designed for thermal receipt printers. It supports 80mm, 78mm, 76mm, 58mm, 57mm, 44mm printers.

When recommend to use the 24.8.8 electron version, any major version of electron could not work properly

Installation

$ npm install @plick/electron-pos-printer

Usage

When using it on Electron require import is mandatory even if you are using typescript

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

Outside Electron and on a TS environment we can use import

import { PosPrinter } from '@plick/electron-pos-printer';

Otherwise, on JS environments we can use require

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

Typescript

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

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', // Can be a URL or change the key to "path" if you want to use a local file on disk
    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' | 'divider'
    value: 'SAMPLE HEADING',
    style: { fontWeight: '700', textAlign: 'center', fontSize: '24px' },
  },
  {
    type: 'divider', // we could style it using the style property, we can use divider anywhere, except on the table header
  },
  {
    type: 'text',
    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://www.npmjs.com/package/@plick/electron-pos-printer',
    height: 65,
    width: 65,
    position: 'center',
    style: { margin: '10 20px 20 20px' },
  },
  {
    type: 'text',
    value: 'Table 1',
    style: { fontWeight: '700', textAlign: 'center', fontSize: '24px' },
  },
  {
    type: 'table',
    // style the table
    style: { border: '1px solid #ddd', fontFamily: 'sans-serif' },
    // list of the columns to be rendered in the table header
    tableHeader: [
      { type: 'text', value: 'Animal' },
      { type: 'text', value: 'Count' },
    ],
    // multi dimensional array depicting the rows and columns of the table body
    tableBody: [
      [
        { type: 'text', value: 'Cat' },
        { type: 'text', value: '10' },
      ],
      [
        { type: 'text', value: 'Dog' },
        { type: 'text', value: '5' },
      ],
      [
        { type: 'text', value: 'Pig' },
        { type: 'text', value: '7' },
      ],
    ],
    // list of rows to be rendered in the table footer
    tableFooter: [
      [
        { type: 'text', value: 'Subtotal' },
        { type: 'text', value: '22' },
      ],
      [
        { type: 'text', value: 'Total' },
        { type: 'text', value: '22' },
      ],
    ],
    // 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' },
    // custom style for the header cells
    tableHeaderCellStyle: {
      padding: '2px 2px',
    },
    // custom style for the body cells
    tableBodyCellStyle: {
      padding: '10px 2px',
    },
    // custom style for the footer cells
    tableFooterCellStyle: {
      padding: '5px 2px',
      fontWeight: '400',
    },
  },
  {
    type: 'text',
    value: 'Table 2',
    style: { fontWeight: '700', textAlign: 'center', fontSize: '24px' },
  },
  {
    type: 'table',
    style: { border: '1px solid #000' }, // style the table
    // list of the columns to be rendered in the table header
    tableHeader: [
      { type: 'text', value: 'People' },
      { type: 'text', value: 'Image' },
    ],
    // 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', position: 'center' },
      ],
      [
        {
          type: 'divider',
        },
      ],
      [
        { type: 'text', value: 'Boris' },
        { type: 'image', url: 'https://randomuser.me/api/portraits/men/41.jpg', position: 'center' },
      ],
      [
        {
          type: 'divider',
        },
      ],
      [
        { type: 'text', value: 'Andrew' },
        { type: 'image', url: 'https://randomuser.me/api/portraits/men/23.jpg', position: 'center' },
      ],
      [
        {
          type: 'divider',
        },
      ],
      [
        { type: 'text', value: 'Tyresse' },
        { type: 'image', url: 'https://randomuser.me/api/portraits/men/53.jpg', position: 'center' },
      ],
      [
        {
          type: 'divider',
        },
      ],
    ],
    // list of rows to be rendered in the table footer
    tableFooter: [
      [
        { type: 'text', value: 'People' },
        { type: 'text', value: 'Image' },
      ],
    ],
    // custom style for the table header
    tableHeaderStyle: { backgroundColor: 'red', color: 'white' },
    // custom style for the table body
    tableBodyStyle: { border: '0.5px solid #000' },
    // custom style for the table footer
    tableFooterStyle: { backgroundColor: '#000', color: 'white' },
    // custom style for the header cells
    tableHeaderCellStyle: {
      padding: '5px 2px',
    },
    // custom style for the body cells
    tableBodyCellStyle: {
      padding: '1px 2px',
    },
    // custom style for the footer cells
    tableFooterCellStyle: {
      padding: '2px 2px',
      fontWeight: '400',
    },
  },
];

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

Javascript

const { PosPrinter, PosPrintData, PosPrintOptions } = require('@plick/electron-pos-printer');

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', // Can be a URL or change the key to "path" if you want to use a local file on disk
    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' | 'divider'
    value: 'SAMPLE HEADING',
    style: { fontWeight: '700', textAlign: 'center', fontSize: '24px' },
  },
  {
    type: 'divider', // we could style it using the style property, we can use divider anywhere, except on the table header
  },
  {
    type: 'text',
    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://www.npmjs.com/package/@plick/electron-pos-printer',
    height: 65,
    width: 65,
    position: 'center',
    style: { margin: '10 20px 20 20px' },
  },
  {
    type: 'text',
    value: 'Table 1',
    style: { fontWeight: '700', textAlign: 'center', fontSize: '24px' },
  },
  {
    type: 'table',
    // style the table
    style: { border: '1px solid #ddd', fontFamily: 'sans-serif' },
    // list of the columns to be rendered in the table header
    tableHeader: [
      { type: 'text', value: 'Animal' },
      { type: 'text', value: 'Count' },
    ],
    // multi dimensional array depicting the rows and columns of the table body
    tableBody: [
      [
        { type: 'text', value: 'Cat' },
        { type: 'text', value: '10' },
      ],
      [
        { type: 'text', value: 'Dog' },
        { type: 'text', value: '5' },
      ],
      [
        { type: 'text', value: 'Pig' },
        { type: 'text', value: '7' },
      ],
    ],
    // list of rows to be rendered in the table footer
    tableFooter: [
      [
        { type: 'text', value: 'Subtotal' },
        { type: 'text', value: '22' },
      ],
      [
        { type: 'text', value: 'Total' },
        { type: 'text', value: '22' },
      ],
    ],
    // 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' },
    // custom style for the header cells
    tableHeaderCellStyle: {
      padding: '2px 2px',
    },
    // custom style for the body cells
    tableBodyCellStyle: {
      padding: '10px 2px',
    },
    // custom style for the footer cells
    tableFooterCellStyle: {
      padding: '5px 2px',
      fontWeight: '400',
    },
  },
  {
    type: 'text',
    value: 'Table 2',
    style: { fontWeight: '700', textAlign: 'center', fontSize: '24px' },
  },
  {
    type: 'table',
    style: { border: '1px solid #000' }, // style the table
    // list of the columns to be rendered in the table header
    tableHeader: [
      { type: 'text', value: 'People' },
      { type: 'text', value: 'Image' },
    ],
    // 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', position: 'center' },
      ],
      [
        {
          type: 'divider',
        },
      ],
      [
        { type: 'text', value: 'Boris' },
        { type: 'image', url: 'https://randomuser.me/api/portraits/men/41.jpg', position: 'center' },
      ],
      [
        {
          type: 'divider',
        },
      ],
      [
        { type: 'text', value: 'Andrew' },
        { type: 'image', url: 'https://randomuser.me/api/portraits/men/23.jpg', position: 'center' },
      ],
      [
        {
          type: 'divider',
        },
      ],
      [
        { type: 'text', value: 'Tyresse' },
        { type: 'image', url: 'https://randomuser.me/api/portraits/men/53.jpg', position: 'center' },
      ],
      [
        {
          type: 'divider',
        },
      ],
    ],
    // list of rows to be rendered in the table footer
    tableFooter: [
      [
        { type: 'text', value: 'People' },
        { type: 'text', value: 'Image' },
      ],
    ],
    // custom style for the table header
    tableHeaderStyle: { backgroundColor: 'red', color: 'white' },
    // custom style for the table body
    tableBodyStyle: { border: '0.5px solid #000' },
    // custom style for the table footer
    tableFooterStyle: { backgroundColor: '#000', color: 'white' },
    // custom style for the header cells
    tableHeaderCellStyle: {
      padding: '5px 2px',
    },
    // custom style for the body cells
    tableBodyCellStyle: {
      padding: '1px 2px',
    },
    // custom style for the footer cells
    tableFooterCellStyle: {
      padding: '2px 2px',
      fontWeight: '400',
    },
  },
];

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!!
Use the style property, example: style: {fontWeight: "700", textAlign: 'center', fontSize: "24px"}

Property	Type	Description
type	`string`	`text`, `qrCode`, `barCode`, `image`, `table`, `divider` // 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[]`	The columns to be rendered in the header of the table. Works with type `table`
tableBody	`PosPrintTableField[][]`	The columns to be rendered in the body of the table. Works with type `table`
tableFooter	`PosPrintTableField[][]`	The columns to rendered it the footer of the table. Works with type `table`
tableHeaderStyle	`PrintDataStyle`	Set a custom style to the table header
tableBodyStyle	`PrintDataStyle`	Set a custom style to the table body
tableFooterStyle	`PrintDataStyle`	Set a custom style to the table footer
tableHeaderCellStyle	`PrintDataStyle`	Set a custom style to the header cells
tableBodyCellStyle	`PrintDataStyle`	Set a custom style to the body cells
tableFooterCellStyle	`PrintDataStyle`	Set a custom style to the footer cells

Additional Types

type PosPrintTableField = {
  type: 'text' | 'image' | 'divider';
  value?: string;
  path?: string;
  style?: PrintDataStyle;
  width?: string; // for type image
  height?: string; // for type image
}

// PrintDataStyle is a type of object with jsx css properties

FAQ

Having sizing issues? Try to set the pageSize option to:

pageSize: {
  width: 71000,
  height: 301000,
}

For previews only, you can set the width to 205 (close to 80mm size):

pageSize: {
  width: 205,
  height: 301000,
}

Having table issues? This fields are mandatory on tables, you can leave them empty but they must be present:

tableHeader
tableBody
tableFooter
tableHeaderStyle
tableBodyStyle
tableFooterStyle

Notes

Fork
Forked from https://github.com/Hubertformin/electron-pos-printer Version 1.3.6

electron printer thermal pos

jsbarcode qrcode

@everything-registry/sub-chunk-726

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago