electron开发 - 打印流程(仅支持6.0.0版本以上)

Electron打印

标签打印

标签打印一般有两种方式：

1. 驱动打印，与普通打印机一样通过驱动方式打印。
2. 通过指令打印，不同厂家的的打印机指令集不一样，可查看厂家提供的手册。

electron 打印方式

1. 直接调用打印机打印
2. 打印到pdf

打印流程

1. 本机安装打印机驱动
2. 配置打印机名称
3. 调用打印前判断打印机是否可用
4. 打印

打印机返回状态参考

status为0时表示打印机可用

1. 通过window的webcontent对象，使用此种方式需要单独开出一个打印的窗口，可以将该窗口隐藏，但是通信调用相对复杂
2. 使用页面的webview元素调用打印，可以将webview隐藏在调用的页面中，通信方式比较简单

webcontent打印

1. 主进程创建一个打印窗口(print.html)
2. 通过主进程和组件(渲染进程)交互，确认打印机可用
3. 组件选择打印机，推送打印机详情和需要打印的信息到独立的print.html（打印窗口）
4. 打印窗口通知主进程打印

// 主进程

// 创建窗口

function createPrintWindow() {

  printWindow = new BrowserWindow({

    title: '打印',

    // show: false,

    width: 800,

    height: 600,

    webPreferences: {

      nodeIntegration: true,

    }

  })

  printWindow.loadURL(`file://${path.join(__dirname, '../electron/print/print.html')}`);

  electronHelper.initPrintEvent(printWindow, mainWindow)

}

// 初始化打印机

function initPrintEvent(printWindow, mainWindow) {

  ipcMain.on('print-start', (event, obj) => {

    console.log('print-start')

    printWindow.webContents.send('print-edit', obj);

  })

  // 获得打印机列表

  ipcMain.on('getPrinters', () => {

    console.log('received getPrinters msg');

    const printers = printWindow.webContents.getPrinters();

    mainWindow.send('printerList', printers)

  })

  // 验证打印机状态并打印

  ipcMain.on('tagPrint', (event, deviceName) => {

    const printers = printWindow.webContents.getPrinters();

    console.log('printers：', printers)

    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

        }, (success, failureReason) => {

          if (success) {

            console.log('print success')

          }

          if (failureReason === 'cancelled') {

            console.log('print cancelled');

          }

          if (failureReason === 'failed') {

            console.log('print failed');

          }

        });

      }

    });

  })

}

// 组件(渲染进程)

/**

 * 经营管理 - 商品价签打印

 */

import React, { useState } from 'react'

import CommonWrap from '@cpsCommon/CommonWrap'

import { withRouter, RouteComponentProps } from 'react-router-dom'

import { ipcRenderer as ipc } from 'electron'

import { Button, Select } from 'antd'

const { Option } = Select;

const TagPrint = (props: any & RouteComponentProps) => {

  const [state, setState] = useState({

    printMsg: '这是我要打印的测试内容: TAG_PRINT',

    dataItem: [],

    currentPrinter: ''

  })

  const changeLoginInfo = (type: string, value: any) => {

    setState({ ...state, [type]: value })

  }

  const handleChange = (value) => {

    console.log(`selected ${value}`);

    changeLoginInfo('currentPrinter', value)

  }

  const getPrint = () => {

    console.log('发送获取打印机列表消息');

    if (!ipc) return;

    ipc.send('getPrinters');

    ipc.on('printerList', (event, data: []) => {

      console.log(data); // data就是返回的打印机数据列表

      changeLoginInfo('dataItem', data)

    });

  }

  const startPrint = () => {

    if (!ipc) return;

    ipc.send('print-start', {

        html: state.printMsg,

        deviceName: state.currentPrinter

    });

  }

  return (

    <CommonWrap id='logincomwrap'>

      <div>商品价签打印</div>

      <div>{state.printMsg}</div>

      <Button onClick={getPrint}>

        获取打印机列表

      </Button>

      <Button onClick={startPrint}>

        开始打印

      </Button>

      <h5>打印机选择</h5>

      <Select defaultValue="" style={{ width: 120 }} onChange={handleChange}>

        {state.dataItem.map((item: any) => {

          // eslint-disable-next-line react/jsx-key

          return (<Option value={item}>{item}</Option>);

        })}

      </Select>

    </CommonWrap>

  )

}

export default withRouter(TagPrint)

// 打印窗口(print.html)

const { ipcRenderer } = require('electron');

const _mockDevice = {

    pageUrl: 'http://192.168.2.205:8042/cw?defaultLogin=true&deviceCode=8011',

    deviceName: 'Printer001'

}

ipcRenderer.on('print-edit', (event, obj) => {

    console.log('打印页接收到print-edit', obj);

    let html = '';

    html += `<div>${obj.html}</div>`

    document.body.innerHTML = html;

    ipcRenderer.send('tagPrint', obj.deviceName);

    // ipcRenderer.send('do', _mockDevice.deviceName);

});

这个窗口不能随时打印随时创建，比较耗费性能。可以将它在程序运行时启动好，并做好事件监听。

// 主进程

function createPrintWindow() {

  printWindow = new BrowserWindow({

    title: '打印',

    // show: false,

    width: 800,

    height: 600,

    webPreferences: {

      nodeIntegration: true,

    }

  })

  printWindow.loadURL(`file://${path.join(__dirname, '../electron/print/print.html')}`);

  electronHelper.initPrintEvent(printWindow, mainWindow)

}

app.whenReady().then(() => {

  createPrintWindow()

});

webview打印

渲染进程和打印的webview页面做通信，无需通过主进程，性能较好；

流程

1. 从主进程获取打印机列表(和上一个方式一致)
2. 组件初始化时，通过webview发送 ipc-message事件建立连接
3. 处理需要打印的信息
4. 点击打印，通过webview.send发送事件和打印信息，引用的页面(webview src)接收通知
5. 引用的页面渲染打印信息，通过ipcRenderer.sendToHost通知组件可以打印了
6. webview.print()打印

// 组件

  useEffect(() => {

    console.log('htmlURl', state.printHtmlUrl);

    const webview: any = document.getElementById("printWebview");

    console.log('webview',webview);

    if (webview) {

      webview.addEventListener('ipc-message', (event: any) => {

        console.log('进入webview打印');

        if (event.channel === 'webview-print-do' && state.currentPrinter) {

          // if (event.channel === 'webview-print-do') {

          webview.print(

            {

              silent: false,

              printBackground: true,

              deviceName: state.currentPrinter

            },

            (data) => {

              console.log('打印结果：', data);

            },

          )

        }

      })

    }

  }, [])

  const startPrintWebview = () => {

    const webview: any = document.getElementById("printWebview");

    webview.send('webview-print-render', {

      printName: state.currentPrinter,

      html: state.printMsg

    })

  }

// webview

const { ipcRenderer } = require('electron');

const _mockDevice = {

    pageUrl: 'http://192.168.2.205:8042/cw?defaultLogin=true&deviceCode=8011',

    deviceName: 'Microsoft Print to PDF'

}

ipcRenderer.on('print-edit', (event, obj) => {

    console.log('打印页接收到print-edit', obj);

    let html = '';

    html += `<div>${obj.html}</div>`

    document.body.innerHTML = html;

    ipcRenderer.send('tagPrint', obj.deviceName);

    // ipcRenderer.send('do', _mockDevice.deviceName);

});

ipcRenderer.on('webview-print-render', (event, info) => {

    console.log('webview-print-render')

    // 执行渲染

    document.body.innerHTML = info.html

    ipcRenderer.sendToHost('webview-print-do')

})

注意事项

默认情况下，Electron >= 5禁用 webview 标签。 在构造 BrowserWindow 时，需要通过设置 webviewTag webPreferences选项来启用标签。 更多信息请参看 BrowserWindows 的构造器文档。