如何經過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…