electron 打印有2种方式
第一种：通过window的webcontent对象，使用此种方式需要单独开出一个打印的窗口，可以将该窗口隐藏，但是通信调用相对复杂。
第二种：使用页面的webview元素调用打印，可以将webview隐藏在调用的页面中，通信方式比较简单。
现在用用第一种方式实现electron实现选择打印机打印
1、main.js 配置
// 引入electron并创建一个Browserwindow
const {
app,
BrowserWindow,
ipcMain
} = require('electron');
const path = require('path');
const url = require('url')
const pkg = require('./package.json')
// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow = null,
printWindow = null;
function createWindow() {
//创建浏览器窗口,宽高自定义具体大小你开心就好
mainWindow = new BrowserWindow({
// fullscreen: true, //全屏窗口
// kiosk: true, //服务亭模式
// frame: true, //是否显示窗口边缘框架
backgroundColor: '#fff',
resizable: true, //不可更改窗口尺寸
maximizable: true, //支持最大化
show: false, //为了让初始化窗口显示无闪烁，先关闭显示，等待加载完成后再显示。
// webPreferences: {
// nodeIntegration: true,
// preload: path.join(__dirname, 'preload.js')
// }
})
mainWindow.maximize();
mainWindow.show();
/*
* 加载应用----- electron-quick-start中默认的加载入口
*/
if(pkg.isDev){
mainWindow.loadURL('http://localhost:6300/');
// 打开开发者工具，默认不打开
mainWindow.webContents.openDevTools();
}else{
// 加载应用----适用于 react 项目
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './build/index.html'),
protocol: 'file:',
slashes: true
}))
}
//与子页面建立通信
ipcMain.on('close', e =>{
mainWindow.close();
} );
// 关闭window时触发下列事件.
mainWindow.on('closed', function () {
mainWindow = null;
printWindow.close(); //这个地方很关键，不要放到close中去关闭，不然打包后关闭客户端会报错；
printWindow=null;
})
}
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on('ready', ()=>{
createWindow();
printWeb();
})
// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
// macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
if (mainWindow === null) {
createWindow()
}
})
//打印设置(窗口打印)
function printWeb() {
printWindow = new BrowserWindow({
title: '菜单打印',
show: false,
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, //开启渲染进程中调用模块 即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);
})
//获得打印机列表
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 + '打印机异常');
printWindow.webContents.print({
silent: false,
printBackground: false,
deviceName: ''
},
(data) => {
console.log("回调", 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("回调", data);
});
}
});
})
}
main.js配置就这些
2、创建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、在需要展示打印机列表的地方获取打印机列表数据
//获取打印机列表
getPrint(callback){
ipcRenderer.send('allPrint');
ipcRenderer.on('printName',(event,data)=>{
callback(data) //data就是返回的打印机数据列表
})
},
4、选择一个打印机打印打印调用
//开始打印函数
selPrint=()=>{
let obj = {};
obj.deviceName=this.state.deviceName; //打印机名称
obj.html =`<div>这是一段测试打印的程序</div>` //需打印的数据
startPrint(obj) //调用打印函数打印
}
startPrint:(obj)=>{
if(!ipcRenderer) return;
ipcRenderer.send('print-start', obj)
},
以上就是electron实现选择打印机打印的全部内容，
