打印機型號是：Zebra GT820，需要先從網上下載驅動程序，然后在自己電腦上面安裝。
通過打印機首選項，調整好打印機的打印尺寸，即Size中的Width和Height。
客戶端打印機接入流程
主進程文件：/src/main/index.js引入electron
import { app, BrowserWindow, ipcMain} from 'electron'
主進程獲取打印機列表
我在主進程寫了個方法createWindow創建BrowserWindow，可將這段代碼放在createWindow里面
// 斑馬打印機，在主線程下，通過ipcMain對象監聽渲染線程傳過來的getPrinterList事件 ipcMain.on('getPrinterList', (event) => { // 主線程獲取打印機列表 const list = mainWindow.webContents.getPrinters() // 通過webContents發送事件到渲染線程，同時將打印機列表也傳過去 mainWindow.webContents.send('getPrinterList', list) })
渲染進程獲取打印機列表，可在具體的vue文件里面，create生命周期里，或者觸發某個事件時
// 獲取本地打印機列表，可在vue的created方法里獲取，也可以某個事件觸發獲取 getLocalPrinterList () { this.printerSelection = [] console.log('getLocalPrinterList') // 打印機 // 渲染線程主動發送getPrinterList事件到主線程請求打印機列表 ipc.send('getPrinterList') // 監聽主線程獲取到打印機列表后的回調 ipc.once('getPrinterList', (event, data) => { // data就是打印機列表] for (var i = 0; i < data.length; i++) { var printer = { id: data[i].name, value: data[i].name } this.printerSelection.push(printer) } }) },
創建打印頁面：print-boxcode.html
需要注意的是，這個文件要放在electron的靜態目錄里面，即static目錄。如果不放在static目錄，.html文件是不會打包到dist下的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> body { margin: 0px; padding: 0px; width: 320px; } .title { width: 100%; margin-top: 10px; margin-bottom: 10px; text-align: right; font-size: 22px; font-weight: bold; } .content { width: 100%; border: 1px solid #000; margin: 0px; padding: 10px; } table tr td{ line-height: 36px; } </style> </head> <body> <div class="title">Box</div> <div class="content"> <table> <tr> <td width="54%">batchNo:</td> <td width="46%">{{batchNo}}</td> </tr> <tr> <td>P/N:</td> <td>{{pn}}</td> </tr> <tr> <td>specifications:</td> <td>{{specifications}}</td> </tr> <tr> <td>quantity:</td> <td>{{quantity}}</td> </tr> <tr> <td>date of manufacture:</td> <td>{{date}}</td> </tr> <tr> <td>employee number:</td> <td>{{employee}}</td> </tr> <tr> <td colspan="2" align="center"> <img id="barCode" /> <div style="margin-top: -25px;">{{barCode}}</div> </td> </tr> </table> </div> </body> <script> // ★★★★★★因為打印機的大小未做調整，搞了好久沒搞好，需要到系統里面設置打印機的紙張大小★★★★★★ //引入ipcRenderer對象 const {ipcRenderer} = require('electron') const JsBarcode = require('jsbarcode') //監聽渲染線程傳過來的webview-print-render事件 ipcRenderer.on('webview-print-render', (event, data) => { var width = data.barCode.length > 14 ? 1 : 2 // 生成條形碼 JsBarcode('#barCode', data.barCode, { width: width,//條形碼中每條線的寬度 height: 100,//條形碼高度 displayValue: false//條形碼下面是否顯示對應的值 }) // 替換占位符 var html = document.getElementsByClassName('content')[0].innerHTML html = html.replace("{{batchNo}}", data.batchNo) html = html.replace("{{pn}}", data.pn) html = html.replace("{{specifications}}", data.specifications) html = html.replace("{{quantity}}", data.quantity) html = html.replace("{{date}}", data.date) html = html.replace("{{employee}}", data.employee) html = html.replace("{{barCode}}", data.barCode) //var obj = document.getElementById('bd') document.getElementsByClassName('content')[0].innerHTML = html //通過ipcRenderer對象的sendToHost方法和渲染線程通訊，告訴渲染線程打印的內容已經准備完畢 ipcRenderer.sendToHost('webview-print-do') }) </script> </html>
在具體的vue文件里面使用WebView引入print-boxcode.html文件，注意src路徑
<webview ref="printWebview" src="./static/print-boxcode.html" nodeintegration="true" style="width:1000px; height:650px; display:none;"></webview>
在具體的vue文件里面添加對WebView的監聽事件
created生命周期添加如下代碼：
// 打印機 window.setTimeout(() => { var webview = this.$refs.printWebview // 監聽<webview>里面的消息，也就是監聽print.html里面的ipcRenderer.sendToHost發送的事件，當該事件發送成功后就會進入下面的回調事件中執行打印操作。 webview.addEventListener('ipc-message', (event) => {
if (event.channel === 'webview-print-do') {// 如果收到<webview>傳過來的事件，名為"webview-print-do"，就執行 webview.print打印方法，打印<webview>里面的內容。 webview.print( { // 是否是靜默打印 silent: true, printBackground: false, // 打印機的名稱 deviceName: this.localPrinter } ) window.setTimeout(() => { this.boxCodeClickLoading = false this.reprintBoxCodeBtnLoading = false }, 2000) } }) }, 1000)
在具體的vue文件里面的某個按鈕的打印事件：
// 打印箱碼 printBoxCode (boxCode, goodsCode, batchNo, qty, manufactureDate, employeeNumber, specifications) { this.reprintBoxCodeBtnLoading = true // 發送數據 var data = { batchNo: batchNo, pn: goodsCode, specifications: specifications, quantity: qty, date: manufactureDate, employee: employeeNumber, barCode: boxCode } // 告訴渲染進程，開始渲染打印內容 var webview = this.$refs.printWebview webview.send('webview-print-render', data) }
解釋：打印事件觸發后，發送webview-print-render命令給print-boxcode.html，print-boxcode.html收到后發送webview-print-do命令給vue文件中的監聽者。vue文件監聽到命令再發送打印命令給打印機。
上張圖：
參考文獻：
https://gitcode.net/mirrors/ConardLi/electron-print-demo?utm_source=csdn_github_accelerator
https://blog.csdn.net/qq_34149805/article/details/82920566
https://blog.csdn.net/qq_31001061/article/details/120087603
https://www.jb51.net/article/151354.htm，有打印回調方法
https://segmentfault.com/a/1190000015842187，參考第三種封裝工具類
https://blog.csdn.net/xidianyueyong/article/details/98182687，解決發布后，webview無法加載.html文件的問題。因為目錄不對，應該把.html文件放在static目錄下。然后打包的時候，會從這個目錄下找相關的.html文件。