@plick/electron-pos-printer
Advanced tools
Electron printer plugin for 80mm, 78mm, 76mm, 58mm, 57mm, 44mm printers
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.8electron version, any major version of electron could not work properly
$ npm install @plick/electron-pos-printer
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');
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);
});
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);
});
| 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 |
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 |
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
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
Fork
Forked from
https://github.com/Hubertformin/electron-pos-printer
Version1.3.6
FAQs
Electron printer plugin for 80mm, 78mm, 76mm, 58mm, 57mm, 44mm printers
The npm package @plick/electron-pos-printer receives a total of 103 weekly downloads. As such, @plick/electron-pos-printer popularity was classified as not popular.
We found that @plick/electron-pos-printer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Socket uncovered npm malware campaign mimicking popular Node.js libraries and packages from other ecosystems; packages steal data and execute remote code.
Research
Socket's research uncovers three dangerous Go modules that contain obfuscated disk-wiping malware, threatening complete data loss.
Research
Socket uncovers malicious packages on PyPI using Gmail's SMTP protocol for command and control (C2) to exfiltrate data and execute commands.