前车之鉴

也是阅读了很多资料和前人踩的坑，直接使用webContent.print方法进行打印。其他方式要不就是Bug多，官方修复也有问题；要不就是官方升级版本后不再支持等
不赘述

需求思路

• 在main里面实现printerHandle，暴露给渲染线程去调用打印等功能
• 点击打印后，调出打印页面（新建窗口再隐藏）
• 通过路径指向打印页面的路由地址，在此页面进行html和css编码，实现打印内容编辑
• 在onMounted事件上直接执行打印操作，实现静默
• 打印完成后，销毁窗口（此过程用户无感）

具体实现

main

• getPrinter

获取打印机列表，有array.length再继续

  private async getPrinters(event: IpcMainInvokeEvent) {const printers = await event.sender.getPrintersAsync()return printers}

• print

打印功能，使用官方提供API

  private print(event: IpcMainInvokeEvent, options: WebContentsPrintOptions) {return new Promise(resolve => {event.sender.print(options, (success: boolean, failureReason: string) => {resolve({ success, failureReason })})})}

• createPrint

创建打印窗口（显示可预览，隐藏可静默）
这里有一个print页面要写，路径指向此页面路由
区分开发环境和生产环境
数据我是通过query传参方式通信，也可以用其他方式（store，cookie等）

  private createPrint(_, data: string) {if (win) {win.destroy()win = null}win = new BrowserWindow({titleBarStyle: 'hidden',width: 1240,height: 768,useContentSize: true,frame: false,show: false,webPreferences: {preload: join(__dirname, '../preload/index.js'),sandbox: false}})const url = is.dev ? new URL(process.env.ELECTRON_RENDERER_URL!) : new URL('file://')url.pathname = is.dev ? '' : join(__dirname, '../renderer/index.html')url.hash = `#/print?data=${data}`win.loadURL(url.href)// win.webContents.openDevTools()win.setMenu(null)win.on('ready-to-show', () => {// win?.show()win?.hide()})win.on('closed', () => {win = null})}

• destroyPrint

  private destroyPrint() {if (win) {win.destroy()win = null}}

• 其他代码

// 在class外部定义winlet win = null as BrowserWindow | null// 提供registerregister() {ipcMain.handle('get-printers', this.getPrinters)ipcMain.handle('print', this.print)ipcMain.handle('create-print-window', this.createPrint)ipcMain.handle('destroy-print-window', this.destroyPrint)}

preload

const api = {printer: {getPrinter: () => ipcRenderer.invoke('get-printers'),print: (options: WebContentsPrintOptions) => ipcRenderer.invoke('print', options),createPrintWindow: (data: string) => ipcRenderer.invoke('create-print-window', data),destroyPrintWindow: () => ipcRenderer.invoke('destroy-print-window')}
}contextBridge.exposeInMainWorld('api', api)

renderer

• 触发打印功能

const printClick = ref(false)
const handlePrint = async (data: Order) => {if (printClick.value) {return}printClick.value = trueconst list = await window.api.printer.getPrinter()console.log(list)if (!list.length) {toast('没有检测到打印设备！', 'error')return}toast('正在打印出货单...', 'info')await window.api.printer.createPrintWindow(JSON.stringify({ ...data, createTime: formatDate(data.createTime) }))printClick.value = false
}

• 打印窗口页面

<template>
........
<!-- 打印内容和样式 -->
<!-- handle里面 win.show()和控制台功能可临时调试放开注释 -->
</template><script setup name="Print" lang="ts">
import { WebContentsPrintOptions } from 'electron'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'// 从query获取内容
const query = useRoute().query
const { data } = query
const order: Order = JSON.parse(data as string)// 这里加了延时，后面解释...
onMounted(() => {setTimeout(print, 100)
})// 这里解释
// el-table看到的样式和打印出来的样式区别更大，在于style内联样式的问题
// 渲染后会在.el-table__header,.el-table__body等DOM上计算出宽度来优化样式
// 如果是用户自己点击打印按钮，再去做样式处理setTableFrame是没有问题的，因为样式是后来我们自己加上的100%
// 而为了实现静默下载，需要在页面渲染完成就立即打印，此时elementui也刚刚计算好宽度赋值，而覆盖掉我们的逻辑
// 所以延时了一波，样式没变化，但打印出来的样式就和我们看到的页面样式一样了
const setTableFrame = () => {//el-table设置宽度100%const tableNodes = document.querySelectorAll('.el-table__header,.el-table__body') as NodeListOf<HTMLElement>tableNodes.forEach(table => {table.style.width = '100%'const children = table.childrenfor (let i = 0; i < children.length; i++) {const child = children[i]if (child.localName === 'colgroup') {child.innerHTML = ''}}})//el-table cell设置每个宽度100%const cells = document.querySelectorAll('.cell') as NodeListOf<HTMLElement>cells.forEach(cell => {cell.style.width = '100%'cell.removeAttribute('style')})
}// 打印，先重置el-table样式
const print = async () => {setTableFrame()try {// 设置打印参数，具体看文档const options: WebContentsPrintOptions = {silent: true,margins: { marginType: 'none' },pageSize: 'A4'}await window.api.printer.print(options)} catch (error) {console.log(error)} finally {// 打印完成，调用destoryawait window.api.printer.destroyPrintWindow()}
}
</script>

---

踩坑

如果是普通下载（非静默），到此就没有问题了
我的版本是electron@27，设置silent: true后，有问题，会缩放很小，而且居中展示
那么有问题，就肯定不止我一个人遇到，就肯定有解决方法
不过@24官方已经不支持更新维护了，但是基本没啥问题（打印功能很迷，据说时不时一个版本好，一个版本又坏，然后又好）
后期项目还要支持win7，还得降级到@21，没bug不出问题就完事～