一个全能的electron打印插件

前端刘工

共 5825字,需浏览 12分钟

 ·

2021-10-30 00:39

可以一键打印图片、文本、二维码、条形码、表格

不用安装其他多余插件,亲测十分好用

electron-pos-printer

1、安装

npm install electron-pos-printeryarn add electron-pos-printer

2、使用

在main主进程中引入

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

在render渲染进程中引入

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

定义参数

const printOptions = {   preview: false,               // 打印预览   width: '80px',               //  宽度   margin: '0 0 0 0',            // 外边距   copies: 1,                    // 打印页数   printerName: '',        // 打印机名称   timeOutPerLine: 400,    //超时时间   pageSize: { height: 301000, width: 71000 }  // 页面大小}

注意:

页面大小需要根据你的纸张大小自己调试

打印机名称通过remote.getCurrentWebContents().getPrinters()获取

开始打印二维码

/**     * 去打印     * value:二维码数据     * textLeft:文本左边距距离     */    _toPrint(value, textLeft) {      const printerName = new Store().get('printerName')      if (!printerName) {        //请先选择打印机        this.showSelPrintModal = true        return      }      const data = [        {          type: 'qrCode',          value,          height: 100,          width: 100,          displayValue: true, // Display value below barcode          style: `margin-left:80px;`,        },        {          type: 'text',          value,          style: `margin-left:${textLeft}px;`,        },      ]      printOptions = { ...printOptions, printerName }      PosPrinter.print(data, printOptions)        .then(() => {})        .catch((error) => {          console.error('打印错误', error)        })    },

说明:先获取打印机名称,然后调用插件打印,边距需要调式这个距离

打印成果(纸张是700*500)

 打印条形码也是如此(修改一下data)

 const data = [        {          type: 'barCode',          value,          height: 110,          width: 1,          displayValue: true, // 是否显示数值          fontsize: 16,          style: `margin-left:${left}px;`,        },      ]

大功告成!!!

还有表格、图片我就不演示了,直接上作者demo

const {PosPrinter} = require("electron-pos-printer");const path = require("path");const options = {   preview: false,               // 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}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);  });


浏览 114
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报