快捷導(dǎo)航

Electron實(shí)現(xiàn)靜默打印小票的流程詳解

更新時(shí)間：2024年06月11日 09:28:53 作者：彷徨的耗子

很多情況下程序中使用的打印都是用戶無(wú)感知的,并且想要靈活的控制打印內(nèi)容,往往需要借助打印機(jī)給我們提供的api再進(jìn)行開(kāi)發(fā),這種開(kāi)發(fā)方式非常繁瑣,并且開(kāi)發(fā)難度較大,本文給大家介紹了Electron實(shí)現(xiàn)靜默打印小票的流程,感興趣的朋友可以參考下

1.渲染進(jìn)程通知主進(jìn)程打印
2.主進(jìn)程接收消息,創(chuàng)建打印頁(yè)面
3.打印頁(yè)面接收消息，拿到數(shù)據(jù)渲染頁(yè)面完成后通知主進(jìn)程開(kāi)始打印
4.主進(jìn)程接收消息開(kāi)始打印,并且通知渲染進(jìn)程打印狀態(tài)

Electron實(shí)現(xiàn)靜默打印小票

靜默打印流程

1.渲染進(jìn)程通知主進(jìn)程打印

//渲染進(jìn)程 data是打印需要的數(shù)據(jù)
window.electron.ipcRenderer.send('handlePrint', data)

2.主進(jìn)程接收消息,創(chuàng)建打印頁(yè)面

//main.ts
/* 打印頁(yè)面 */
let printWindow: BrowserWindow | undefined
/**
 * @Author: yaoyaolei
 * @Date: 2024-06-07 09:27:22
 * @LastEditors: yaoyaolei
 * @description: 創(chuàng)建打印頁(yè)面
 */
const createPrintWindow = () => {
  return new Promise<void>((resolve) => {
    printWindow = new BrowserWindow({
      ...BASE_WINDOW_CONFIG,
      title: 'printWindow',
      webPreferences: {
        preload: join(__dirname, '../preload/index.js'),
        sandbox: false,
        nodeIntegration: true,
        contextIsolation: false
      }
    })

    printWindow.on('ready-to-show', () => {
      //打印頁(yè)面創(chuàng)建完成后不需要顯示,測(cè)試時(shí)可以調(diào)用show查看頁(yè)面樣式(下面有我處理的樣式圖片)
      // printWindow?.show()
      resolve()
    })

    printWindow.webContents.setWindowOpenHandler((details: { url: string }) => {
      shell.openExternal(details.url)
      return { action: 'deny' }
    })

    if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
      printWindow.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/print.html`)
    } else {
      printWindow.loadFile(join(__dirname, `../renderer/print.html`))
    }
  })
}

ipcMain.on('handlePrint', (_, obj) => {
   //主進(jìn)程接受渲染進(jìn)程消息,向打印頁(yè)面?zhèn)鬟f數(shù)據(jù)
  if (printWindow) {
    printWindow!.webContents.send('data', obj)
  } else {
    createPrintWindow().then(() => {
      printWindow!.webContents.send('data', obj)
    })
  }
})

3.打印頁(yè)面接收消息，拿到數(shù)據(jù)渲染頁(yè)面完成后通知主進(jìn)程開(kāi)始打印

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>打印</title>
  <style>
  </style>
</head>

<body>

</body>
<script>
  window.electron.ipcRenderer.on('data', (_, obj) => {
  //這里是接受的消息,處理完成后將html片段放在body里面完成后就可以開(kāi)始打印了
  //樣式可以寫(xiě)在style里,也可以內(nèi)聯(lián)
    console.log('event, data: ', obj);
  //這里自由發(fā)揮
    document.body.innerHTML = '處理的數(shù)據(jù)'
  //通知主進(jìn)程開(kāi)始打印
    window.electron.ipcRenderer.send('startPrint')
  })
</script>
</html>

這個(gè)是我處理完的數(shù)據(jù)樣式,這個(gè)就是print.html

4.主進(jìn)程接收消息開(kāi)始打印,并且通知渲染進(jìn)程打印狀態(tài)

ipcMain.on('startPrint', () => {
  printWindow!.webContents.print(
    {
      silent: true,
      margins: { marginType: 'none' }
    },
    (success) => {
      //通知渲染進(jìn)程打印狀態(tài)
      if (success) {
        mainWindow.webContents.send('printStatus', 'success')
      } else {
        mainWindow.webContents.send('printStatus', 'error')
      }
    }
  )
})