electron实现静默打印（各种踩坑解决）

前车之鉴

也是阅读了很多资料和前人踩的坑，直接使用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外部定义win
  let win = null as BrowserWindow | null


// 提供register
  register() {
    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 = true
  const 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.children
    for (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 {
  // 打印完成，调用destory
    await window.api.printer.destroyPrintWindow()
  }
}
</script>

---

踩坑

如果是普通下载（非静默），到此就没有问题了

我的版本是electron@27，设置silent: true后，有问题，会缩放很小，而且居中展示

那么有问题，就肯定不止我一个人遇到，就肯定有解决方法

不过@24官方已经不支持更新维护了，但是基本没啥问题（打印功能很迷，据说时不时一个版本好，一个版本又坏，然后又好）

后期项目还要支持win7，还得降级到@21，没bug不出问题就完事～