An electron printer plugin, currently supports 58mm, requires electron >= 4.x.x.
# Clone this repository
git clone git@github.com:Bookla-app/electron-pos-printer.git
# Go into the repository
cd electron-pos-printer
# Install dependencies
npm installTo run the demo, do the following:
# Go to demo folder
cd demo
# Install demo dependencies
npm install
# Go back to main folder
cd ../
# Run the demo app
npm startconst { PosPrinter } = require("electron-pos-printer");const { PosPrinter } = require("electron").remote.require(
"electron-pos-printer"
);const { PosPrinter } = require("electron-pos-printer");
const path = require("path");
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: "XP-80C", // printerName: string, check with webContent.getPrinters()
timeOutPerLine: 400,
pageSize: { height: 301000, width: 71000 }, // page size
};
const data = [
{
type: "image",
path: path.join(__dirname, "assets/banner.png"), // file path
position: "center", // position of image: 'left' | 'center' | 'right'
width: "60px", // 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: `text-align:center;`,
css: { "font-weight": "700", "font-size": "18px" },
},
{
type: "text", // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
value: "Secondary text",
style: `text-align:left;color: red;`,
css: { "text-decoration": "underline", "font-size": "10px" },
},
{
type: "barCode",
value: "HB4587896",
height: 12, // height of barcode, applicable only to bar and QR codes
width: 1, // width of barcode, applicable only to bar and QR codes
displayValue: true, // Display value below barcode
fontsize: 8,
},
{
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: "background-color: #000; color: white;",
// custom style for the table body
tableBodyStyle: "border: 0.5px solid #ddd",
// custom style for the table footer
tableFooterStyle: "background-color: #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: "Animal" },
{ 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: "Cat" },
{ type: "image", path: "./animals/cat.jpg" },
],
[
{ type: "text", value: "Dog" },
{ type: "image", path: "./animals/dog.jpg" },
],
[
{ type: "text", value: "Horse" },
{ type: "image", path: "./animals/horse.jpg" },
],
[
{ type: "text", value: "Pig" },
{ type: "image", path: "./animals/pig.jpg" },
],
],
// list of columns to be rendered in the table footer
tableFooter: [{ type: "text", value: "Animal" }, "Image"],
// custom style for the table header
tableHeaderStyle: "background-color: #000; color: white;",
// custom style for the table body
tableBodyStyle: "border: 0.5px solid #ddd",
// custom style for the table footer
tableFooterStyle: "background-color: #000; color: white;",
},
];
PosPrinter.print(data, options)
.then(() => {})
.catch((error) => {
console.error(error);
});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: { height: 301000, width: 71000 }, // page size
};
const data: PosPrintData[] = [
{
type: "image",
path: path.join(__dirname, "assets/banner.png"), // file path
position: "center", // position of image: 'left' | 'center' | 'right'
width: "60px", // 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: `text-align:center;`,
css: { "font-weight": "700", "font-size": "18px" },
},
{
type: "text", // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
value: "Secondary text",
style: `text-align:left;color: red;`,
css: { "text-decoration": "underline", "font-size": "10px" },
},
{
type: "barCode",
value: "HB4587896",
height: 12, // height of barcode, applicable only to bar and QR codes
width: 1, // width of barcode, applicable only to bar and QR codes
displayValue: true, // Display value below barcode
fontsize: 8,
},
{
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: "background-color: #000; color: white;",
// custom style for the table body
tableBodyStyle: "border: 0.5px solid #ddd",
// custom style for the table footer
tableFooterStyle: "background-color: #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: "Animal" },
{ 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: "Cat" },
{ type: "image", path: "./animals/cat.jpg" },
],
[
{ type: "text", value: "Dog" },
{ type: "image", path: "./animals/dog.jpg" },
],
[
{ type: "text", value: "Horse" },
{ type: "image", path: "./animals/horse.jpg" },
],
[
{ type: "text", value: "Pig" },
{ type: "image", path: "./animals/pig.jpg" },
],
],
// list of columns to be rendered in the table footer
tableFooter: [{ type: "text", value: "Animal" }, "Image"],
// custom style for the table header
tableHeaderStyle: "background-color: #000; color: white;",
// custom style for the table body
tableBodyStyle: "border: 0.5px solid #ddd",
// custom style for the table footer
tableFooterStyle: "background-color: #000; color: white;",
},
];
PosPrinter.print(data, options)
.then(() => {})
.catch((error) => {
console.error(error);
});| Options | |
|---|---|
| copies | (number) number of copies to print |
| preview | (boolean) preview in a window, default is false |
| margin | (string) margin of a page, css values can be used |
| printerName | (string) the printer's name |
| timeOutPerLine | (number) timeout per line, default is 400 |
| silent | (boolean) To print silently without printer selection pop-up, default is true |
| pageSize | (SizeOptions) Specify the width and height of the print out page |
| 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 | (string) styles, css rules can be used |
| css | (string) css rules ex: {"font-size": "12px"} |
| displayValue | (boolean) display value of barcode below barcode |
| position | (string) 'left', 'center', 'right' applicable to type qrCode, barCode and image |
| path | (string) Path to the image asset |
| tableHeader | (PosPrintTableField[], string[]) the columns to be rendered in the header of the table, works with type table |
| tableBody | (PosPrintTableField[][], string[][]) the columns to be rendered in the body of the table, works with type table |
| tableFooter | (PosPrintTableField[], string[]) the columns to rendered it the footer of the table, works with type table |
| tableHeaderStyle | (string) set custom style to the table header |
| tableBodyStyle | (string) set custom style to the table body |
| tableFooterStyle | (string) set custom style to the table footer |