electron 打印有2種方式
第一種：通過window的webcontent對象庐船，使用此種方式需要單獨(dú)開出一個(gè)打印的窗口俏让，可以將該窗口隱藏晶渠，但是通信調(diào)用相對復(fù)雜侦镇。
第二種：使用頁面的webview元素調(diào)用打印，可以將webview隱藏在調(diào)用的頁面中髓梅，通信方式比較簡單拟蜻。
現(xiàn)在用用第一種方式實(shí)現(xiàn)electron實(shí)現(xiàn)選擇打印機(jī)打印
1、main.js 配置
// 引入electron并創(chuàng)建一個(gè)Browserwindow
const {
app,
BrowserWindow,
ipcMain
} = require('electron');
const path = require('path');
const url = require('url')
const pkg = require('./package.json')
// 保持window對象的全局引用,避免JavaScript對象被垃圾回收時(shí),窗口被自動(dòng)關(guān)閉.
let mainWindow = null,
printWindow = null;
function createWindow() {
//創(chuàng)建瀏覽器窗口,寬高自定義具體大小你開心就好
mainWindow = new BrowserWindow({
// fullscreen: true, //全屏窗口
// kiosk: true, //服務(wù)亭模式
// frame: true, //是否顯示窗口邊緣框架
backgroundColor: '#fff',
resizable: true, //不可更改窗口尺寸
maximizable: true, //支持最大化
show: false, //為了讓初始化窗口顯示無閃爍枯饿，先關(guān)閉顯示酝锅，等待加載完成后再顯示。
// webPreferences: {
// nodeIntegration: true,
// preload: path.join(__dirname, 'preload.js')
// }
})
mainWindow.maximize();
mainWindow.show();
/*
* 加載應(yīng)用----- electron-quick-start中默認(rèn)的加載入口
*/
if(pkg.isDev){
mainWindow.loadURL('http://localhost:6300/');
// 打開開發(fā)者工具奢方，默認(rèn)不打開
mainWindow.webContents.openDevTools();
}else{
// 加載應(yīng)用----適用于 react 項(xiàng)目
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './build/index.html'),
protocol: 'file:',
slashes: true
}))
}
//與子頁面建立通信
ipcMain.on('close', e =>{
mainWindow.close();
} );
// 關(guān)閉window時(shí)觸發(fā)下列事件.
mainWindow.on('closed', function () {
mainWindow = null;
printWindow.close(); //這個(gè)地方很關(guān)鍵搔扁，不要放到close中去關(guān)閉爸舒，不然打包后關(guān)閉客戶端會報(bào)錯(cuò)；
printWindow=null;
})
}
// 當(dāng) Electron 完成初始化并準(zhǔn)備創(chuàng)建瀏覽器窗口時(shí)調(diào)用此方法
app.on('ready', ()=>{
createWindow();
printWeb();
})
// 所有窗口關(guān)閉時(shí)退出應(yīng)用.
app.on('window-all-closed', function () {
// macOS中除非用戶按下 `Cmd + Q` 顯式退出,否則應(yīng)用與菜單欄始終處于活動(dòng)狀態(tài).
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS中點(diǎn)擊Dock圖標(biāo)時(shí)沒有已打開的其余應(yīng)用窗口時(shí),則通常在應(yīng)用中重建一個(gè)窗口
if (mainWindow === null) {
createWindow()
}
})
//打印設(shè)置(窗口打印)
function printWeb() {
printWindow = new BrowserWindow({
title: '菜單打印',
show: false,
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, //開啟渲染進(jìn)程中調(diào)用模塊 即require
}
})
printWindow.loadFile('./src/print/print.html');
initPrintEvent()
}
function initPrintEvent() {
ipcMain.on('print-start', (event, obj) => {
console.log('print-start')
printWindow.webContents.send('print-edit', obj);
})
//獲得打印機(jī)列表
ipcMain.on('allPrint',()=>{
const printers = printWindow.webContents.getPrinters();
mainWindow.send('printName',printers)
})
ipcMain.on('do', (event, deviceName) => {
const printers = printWindow.webContents.getPrinters();
printers.forEach(element => {
if (element.name === deviceName && element.status != 0) {
mainWindow.send('print-error', deviceName + '打印機(jī)異常');
printWindow.webContents.print({
silent: false,
printBackground: false,
deviceName: ''
},
(data) => {
console.log("回調(diào)", data);
});
} else if (element.name === deviceName && !element.status) {
console.log(element.status+'-'+deviceName)
printWindow.webContents.print({
silent: true,
printBackground: false,
deviceName: element.name
},
(data) => {
console.log("回調(diào)", data);
});
}
});
})
}
main.js配置就這些
2稿蹲、創(chuàng)建print.html與print.js
print.html
<!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>菜單打印</title>
</head>
<style>
@page{
padding: 0;
margin: 0;
}
*{
padding: 0;
margin: 0;
}
</style>
<body>
hello,world
</body>
<script src="./print.js"></script>
</html>
print.js
const { ipcRenderer } = require('electron');
ipcRenderer.on('print-edit', (event, obj) => {
let html = '';
html+=`<div>${obj.html}</div>`
document.body.innerHTML = html;
ipcRenderer.send('do', obj.deviceName);
})
3扭勉、在需要展示打印機(jī)列表的地方獲取打印機(jī)列表數(shù)據(jù)
//獲取打印機(jī)列表
getPrint(callback){
ipcRenderer.send('allPrint');
ipcRenderer.on('printName',(event,data)=>{
callback(data) //data就是返回的打印機(jī)數(shù)據(jù)列表
})
},
4、選擇一個(gè)打印機(jī)打印打印調(diào)用
//開始打印函數(shù)
selPrint=()=>{
let obj = {};
obj.deviceName=this.state.deviceName; //打印機(jī)名稱
obj.html =`<div>這是一段測試打印的程序</div>` //需打印的數(shù)據(jù)
startPrint(obj) //調(diào)用打印函數(shù)打印
}
startPrint:(obj)=>{
if(!ipcRenderer) return;
ipcRenderer.send('print-start', obj)
},
以上就是electron實(shí)現(xiàn)選擇打印機(jī)打印的全部內(nèi)容苛聘，
