一 需求：
公司項目需要通過electron調用系統打印機，實現打印小票的功能。
二、分析：
electron打印大概有兩種：
第一種：通過window的webcontent對象，使用此種方式需要單獨開出一個打印的窗口，可以將該窗口隱藏，但是通信調用相對復雜。
第二種：使用頁面的webview元素調用打印，可以將webview隱藏在調用的頁面中，通信方式比較簡單。
兩個對象調用打印方法的使用方式都一樣。
本文是通過第二種方法實現靜默打印。
三、實現過程：
1、要實現打印功能，首先要知道我們的設備上有哪些打印機。方法是：在渲染線程通過electron的ipcRenderer對象發送事件到主線程獲取。（本文的渲染線程可以當做為一個print.vue文件）
（1）主線程（electron.js）偽代碼如下：
//引入electronimport electron from 'electron';//創建一個瀏覽器對象const window = new electron.BrowserWindow({ width, height, frame: false, show: false, backgroundColor: '#4b5b79', minWidth: 1024, minHeight: 768, webPreferences: { webSecurity: false }, }); //在主線程下，通過ipcMain對象監聽渲染線程傳過來的getPrinterList事件electron.ipcMain.on('getPrinterList', (event) => { //主線程獲取打印機列表 const list = window.webContents.getPrinters(); //通過webContents發送事件到渲染線程，同時將打印機列表也傳過去 window.webContents.send('getPrinterList', list);});===============================================================================
（2）渲染線程(print.vue文件)偽代碼如下：
<template></template><script> //引入ipcRenderer對象,該對象和主線程的ipcMain通訊 import { ipcRenderer } from 'electron'; //渲染線程主動發送getPrinterList事件到主線程請求打印機列表 ipcRenderer.send('getPrinterList'); //監聽主線程獲取到打印機列表后的回調 ipcRenderer.once('getPrinterList', (event, data) => { //data就是打印機列表 this.printList = data; });</script>//獲取打印機列表完成2、（重頭戲來了）獲取打印機列表后，就需要通過electron自帶的標簽實現小票排版。 是什么？可以把它當做標簽，它里面顯示的是你需要打印的內容。
（1）使用之前，需要新建一個print.html文件，把你要打印的內容通過print.html顯示出來。我們項目的需求是將要打印的內容通過canvas畫出后，再將canvas轉成圖片資源（base64），然后放到里面顯示，偽代碼如下：
<!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> //@page樣式是用來設置打印機打印出來的樣式，例如設置小票外邊距樣式 @page { margin: 0px; } </style></head><body id='bd'></body><script> //引入ipcRenderer對象 const {ipcRenderer} = require('electron') //監聽渲染線程傳過來的webview-print-render事件 ipcRenderer.on('webview-print-render', (event, deviceInfo) => { // 動態創建一個img標簽，然后插入到<body>中。deviceInfo是渲染線程傳過來的數據 let html = ''; html = `<img src="${deviceInfo.imgSource}" width="${deviceInfo.imgWidth}px" height="${deviceInfo.imgHeight}px">`; document.getElementById('bd').innerHTML = html; //當圖片插入到頁面后，通過ipcRenderer對象的sendToHost方法和渲染線程通訊，告訴渲染線程打印的內容已經準備完畢，請開始打印操作 ipcRenderer.sendToHost('webview-print-do'); });</script></html>
新聞熱點
疑難解答
圖片精選
