标签：const printWindow 打印 electron 静默 Electron html print mainWindow
本文项目基于 electron-vue
思路：在主线程单独开出一个打印的窗口（可以将该窗口隐藏），通过window的webcontent对象进行打印
项目地址
1. 主进程文件 main/index.js
'use strict'
import path from 'path'
import { app, BrowserWindow, ipcMain, Menu } from 'electron'
const electron = require('electron')
/**
* Set `__static` path to static files in production
* https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
*/
if (process.env.NODE_ENV !== 'development') {
global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:9081`
: `file://${__dirname}/index.html`
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
useContentSize: true,
width: 1200,
height: 768,
minWidth: 1200,
minHeight: 675,
show: true,
center: true,
webPreferences: {
webSecurity: false
}
})
// 隐藏菜单栏
Menu.setApplicationMenu(null)
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
if (printWindow) {
printWindow.close()
}
})
createPrintWindow()
}
app.on('ready', createWindow)
app.on('will-quit', function () {
electron.globalShortcut.unregisterAll()
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
// 创建打印窗体
let printWindow
function createPrintWindow() {
printWindow = new BrowserWindow({
show: true,
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
const fileUrl = path.join(__static, 'printer.html')
printWindow.loadFile(fileUrl)
initPrinters()
}
// 打印窗体事件
function initPrinters() {
// 获取打印机列表
ipcMain.on('get-printers', (event, data) => {
const printers = printWindow.webContents.getPrinters()
mainWindow.webContents.send('get-printers', printers)
})
// 获取渲染进程传递过来的打印指令
ipcMain.on('do-print', (event, data) => {
const list = mainWindow.webContents.getPrinters()
const defaultPrinter = list.find(x => x.status === 0 && x.isDefault)
const dataResult = {
html: data.html,
deviceName: data.printerName || defaultPrinter.name
}
// 发送指令到printer.html
printWindow.webContents.send('render-print', dataResult)
})
// 从printer.html传递过来的指令
ipcMain.on('print-do', (e, data) => {
printWindow.webContents.print({
silent: true,
printBackground: false,
deviceName: data
})
})
}
2. static文件下新建printer.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: 0px 16px 0px 0px;
}
@media print {
body {
font-size: 10px;
}
}
*{
padding: 0;
margin: 0;
}
.flex {
display: flex;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
}
</style>
<body>
</body>
<script>
const { ipcRenderer } = require('electron')
// 监听从主进程打印窗体webContents传递过来的打印事件
ipcRenderer.on('render-print', (event, info) => {
document.body.innerHTML = info.html
// 页面html渲染后发送事件到主进程
ipcRenderer.send('print-do', info.deviceName)
})
</script>
</html>
3. vue页面中使用
<template>
<div>
<el-form>
<el-form-item label="打印机列表">
<el-select v-model="selectedPrinterName">
<el-option
v-for="item of printerList"
:key="item.name"
:value="item.name"
:title="item.name"
>
</el-option>
</el-select>
<el-button @click="print">打印</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { ipcRenderer } from 'electron'
export default {
data() {
return {
printerList: [],
selectedPrinterName: ''
}
},
mounted() {
this.getPrinters()
ipcRenderer.on('get-printers', (event, list) => {
console.log('list', list)
this.printerList = list
})
},
methods: {
getPrinters() {
ipcRenderer.send('get-printers')
},
async print() {
const tempalteHtml = '<div style="height: 20px; width: 100%;">测试打印</div>'
ipcRenderer.send('do-print', {
printerName: this.selectedPrinterName,
html: tempalteHtml
})
}
}
}
</script>
``标签：const,printWindow,打印,electron,静默,Electron,html,print,mainWindow 来源： https://www.cnblogs.com/gesheng/p/15683760.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。