如何经过Nw.js纯前端实现调用热敏打印机打印小票？

1. 需求背景

前段时间公司项目须要在商户电脑上调用商户本身的热敏打印机打印商户的客户的购物小票（以下图），但FE的纯js显然不能实现该功能，所以采用nw来实现。

当时的项目已有一个web页面，所以在nw里将已有的html页面嵌入了iframe，与nw内实现的打印功能经过postMessage通讯。但本篇重点介绍如何打印小票，这些通讯以及nw的其余使用就再也不占用篇幅了。

2. 功能点

• 获取用户打印机列表，让用户选择当前使用的打印机
  
• 按照格式打印所需内容

3. 最终代码使用

调用封装后的功能：

const printer = require('./printer.js')

function getPrinterList() {  
    const list = printer.getPrinterList()  
    const res = []  
    list.forEach(item => res.push(item.name))  
    return res
}

// 获取当前打印机列表
const printerList = getPrinterList()
// 暂定使用打印机为第一个
const printerName = printerList[0]
// mock订单数据
const mockData = {  id: 001,  delivery_way: '外送',  deliver_time: '当即送达',  sku_detail: [{    quantity: 10,    sku_name: '火米饼套餐',    price: 20  }],  description: '多放火贝 火火火火',  invoiced: '',  package_fee: 1,  deliver_fee: 10,  total_price: 31,  receiver_address: '火星1区101路1号',  receiver_name: '火星人',  receiver_phone: 00001,  create_time: '0001-01-01',  tagg_shop_name: '火星1号商店'}

// 封装打印订单函数，传参为打印机名称和订单数据
function printOrderRecive(name = '', data = {}) {  
    const Buffer = require('./escpos.js')  
    let buffer = new Buffer()
    buffer = buffer.setLineHeight(70)    
                   .setTextSize(2).setLineHeight(50).setText(data.id, 'center')    
                   .setTextSize(1).setLineHeight(100).setText(`${data.delivery_way} ${data.deliver_time}`, 'center')    
                   .setLineHeight(70).setDecLine()    
                   .setBoldOn()    
                   .setLineHeight(70)  
    data.sku_detail && data.sku_detail.forEach(item => {    
        buffer = buffer.setThreeCol(item.quantity, item.sku_name, `￥${item.price}`)  })  
        buffer = buffer.setLine()    
                       .setLineHeight(100).setText(`备注：${data.description}`).setBoldOff()    
                       .setLineHeight(50).setDecLine()    
                       .setLineHeight(70)    
                       .setTwoCol('开具发票', data.invoiced)    
                       .setTwoCol('包装费', `￥${data.package_fee}`)    
                       .setTwoCol('配送费', `￥${data.deliver_fee}`)    
                       .setLineHeight(50)    
                       .setDecLine()    
                       .setBoldOn().setText(`合计：￥${data.total_price} `, 'right').setBoldOff()    
                       .setDecLine()    
                       .setLineHeight(70)    
                       .setText(`送货地址：${data.receiver_address}`)    
                       .setText(`客户：${data.receiver_name} ${data.receiver_phone}`)    
                       .setDecLine()    
                       .setText(`下单时间: ${data.create_time}`, 'center')    
                       .setLine(2)    
                       .setBoldOn().setText(`${data.tagg_shop_name} \n \n`, 'center').setBoldOff()    
                       .setLine(2)    
                       .cut()    
                       .getBuffer()
    printer.print(name, buffer)
}

// 调用打印功能
printOrderRecive(printerName, mockData)


复制代码

使用前准备：

克隆github代码到本地，使用 npm install 安装package.json中除了printer以外的其余安装包（由于priner包在被nw使用时，须要作特殊处理，且处理环境比较复杂，所以直接将处理好的printer包和项目一块儿上传到了github，虽然项目大了一些，但比较方便操做）

4. 打印功能的主要文件

|-- command.js --------- esc/pos经常使用指令集，十六进制数字，底层指令
|-- escpos.js ---------- 经常使用打印函数的封装，对外的函数，对command进行组合，并返回buffer
|-- printer.js --------- 打印机函数的封装，对外的函数，调用了node-printer模块
|-- example.js --------- 调用打印小票样例，即上面最终代码使用中的样例，对printer.js的调用
|-- index.html --------- 主文件，包括了iframe自适应、iframe与nw的通讯、example.js的调用等复制代码

5. 项目地址

主要使用了node-printer模块并加以封装。

github.com/Littlehorse…