electron@7.2.4实现打印功能

一、background.js，项目入口配置文件

import { app, protocol, BrowserWindow, ipcMain } from 'electron'

/*
* 
* 省略多数默认配置
* 
* */


/*
* 打印
* */

//在主线程下，通过ipcMain对象监听渲染线程传过来的getPrinterList事件
ipcMain.on('getPrinterList', (event) => {
  //主线程获取打印机列表
  const list = win.webContents.getPrinters();

  //通过webContents发送事件到渲染线程，同时将打印机列表也传过去
  win.webContents.send('getPrinterList', list);
});

---

二、printerDiff.vue，打印组件，在components里面创建

<template>
  <div class="container">
    <webview id="printWebview" ref="printWebview" :src="fullPath" nodeintegration/>
    <printDialog :dialog-visible="dialogVisible" @cancel="handlePrintDialogCancel" @select-print="printSelectAfter"/>
  </div>
</template>
<script>
  const {ipcRenderer} = window.require('electron')
  import path from 'path'
  import printDialog from '@/components/PrintDialog.vue'
  import { Message } from 'element-ui'


  export default {
    name: 'Pinter',
    components: {
      printDialog
    },
    props: {
      // HtmlData: {
      //   type: String,
      //   default: '',
      // },
    },
    data () {
      return {
        printList: [],
        dialogVisible: false,
        printDeviceName: '',
        fullPath: path.join(__static, 'print.html'),
        messageBox: null,
        htmlData: ''
      }
    },

    mounted () {
      const webview = this.$refs.printWebview
      webview.addEventListener('ipc-message', async event => {
        if (event.channel === 'webview-print-do') {
          await webview.print({
              silent: true,
              printBackground: true,
              deviceName: this.printDeviceName
          })
        }
      })

    },
    methods: {
      print (val) {
        this.htmlData = val
        this.getPrintListHandle()
      },
      // 获取打印机列表
      getPrintListHandle () {
        // 改用ipc异步方式获取列表，解决打印列数量多的时候导致卡死的问题
        ipcRenderer.send('getPrinterList')
        ipcRenderer.once('getPrinterList', (event, data) => {
          // 过滤可用打印机
          this.printList = data.filter(element => element.status === 0)
          // 1.判断是否有打印服务
          if (this.printList.length <= 0) {
            Message.info('打印服务异常,请尝试重启电脑')
            this.$emit('cancel')
          }
          else {
            this.dialogVisible = true
//            this.checkPrinter()
          }
        })
      },
      // 2.判断打印机状态
      checkPrinter () {
        // 本地获取打印机
        const printerName = this.$util.getLocalStorage('printForm')
        const printer = this.printList.find(device => device.name === printerName)
        // 有打印机设备并且状态正常直接打印
        if (printer && printer.status === 0) {
          this.printDeviceName = printerName
          this.printRender()
        }
        else if (printerName === '') {
          Message.info('请先设置其他打印机')
          this.dialogVisible = true
          this.$emit('cancel')
        }
        else {
          Message.info('当前打印机不可用,请重新设置')
          this.dialogVisible = true
        }
      },

      handlePrintDialogCancel () {
        this.$emit('cancel')
        this.dialogVisible = false
      },
      printSelectAfter (val) {
        this.dialogVisible = false
        this.$util.setLocalStorage('printForm', val.name)
        this.printDeviceName = val.name
        this.printRender()
      },
      printRender (html) {
        Message.info('打印中，请稍后')
        console.log(this.printDeviceName);
        console.log(this.htmlData);
        // 获取<webview>节点
        const webview = this.$refs.printWebview
        // 发送信息到<webview>里的页面
        webview.send('webview-print-render', {
          printName: this.printDeviceName,
          html: this.htmlData
        })
      }
    }
  }
</script>
<style scoped>
  .container {
    position: fixed;
    right: -500px;
  }
</style>

__static无法使用的时候，.eslintrc.js文件添加

globals: {
__static: true
}

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  rules: {
    'no-unused-vars': 'off',
    'no-console': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  globals: {
    __static: true
  },
}

不能直接使用require，需要使用

window.require(‘electron’)

注意

一定要这样写，不要像大部分网络案例写回调，写回调将会报错
webview.print({
silent: true,
printBackground: true,
deviceName: this.printDeviceName
})

添加回调报错

---

三、PrintDialog.vue，打印机列表组件，在components里面创建

this.$util.getLocalStorage(‘printForm’)是获取缓存里面打印机名称，自定义封装的方法，具体写法随意

<template>
  <div>
    <el-dialog width="300px" :visible="dialogVisible" :append-to-body="true" :show-close="false" title="打印机设置">
      <el-table :data="printList" highlight-current-row border @current-change="handleCurrentChange">
        <el-table-column label="打印机名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
            <!--<el-tag v-if="scope.row.name==printName" type="primary" disable-transitions>默认</el-tag>-->
          </template>
        </el-table-column>
        <div slot="empty">
          暂无可用打印机
        </div>
      </el-table>
      <div class="buttonStyle">
        <el-button @click="$emit('cancel')">取消</el-button>
        <el-button type="primary" @click="checkPrinter">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

  const {ipcRenderer} = window.require('electron')
  import { Message } from 'element-ui'

  export default {
    name: '',
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        rowData: null,
        printList: [],
      }
    },
    computed: {
      printName(){
        return this.$util.getLocalStorage('printForm')
      }
    },
    watch: {
      dialogVisible: {
        immediate: true,
        handler: 'getPrintListHandle'
      },
    },
    methods: {
      // 获取打印机列表
      getPrintListHandle (dialogVisible) {
        if (!dialogVisible) {
          return
        }

        // 改用ipc异步方式获取列表，解决打印列数量多的时候导致卡死的问题
        ipcRenderer.send('getPrinterList')
        ipcRenderer.once('getPrinterList', (event, data) => {
          // 过滤可用打印机
          this.printList = data.filter(element => element.status === 0)
        })
      },
      handleCurrentChange (row) {
        this.rowData = row
      },
      // 取消
      cancel () {
        this.dialogVisible = false
      },
      checkPrinter () {
        // 本地获取打印机
        const printerName = this.$util.getLocalStorage('printForm')
        const printer = this.printList.find(device => device.name === printerName)
        // 有打印机设备并且状态正常直接打印
        if (printer && printer.status === 0) {
          this.selectPrint()
        }
        else if (printerName === '') {
          Message.info('请先设置其他打印机')
        }
        else {
          Message.info('当前打印机不可用,请重新设置')
        }
      },
      selectPrint () {
        if (this.rowData) {
          this.$util.setLocalStorage('printForm', this.rowData.name)
          this.$emit('select-print', this.rowData)
        }
        else {
          Message.info('您还没有选择打印机')
        }
      },
    }
  }
</script>

<style scoped>
  .buttonStyle {
    text-align: right;
    margin-top: 20px;
  }
</style>

---

四、Login.vue，页面

<template>
  <div>

    <printerDiff ref="printRef" :html-data="htmlData"></printerDiff>

  </div>

</template>

<script>
  import printerDiff from '@/components/printerDiff.vue'
  import { Message } from 'element-ui'
  const path = window.require('path')


  export default {
    name: 'Login',
    data () {
      return {
        printList: [],
        fullPath: path.join(__static, 'print.html'),
        printDeviceName: '',
        htmlData: '我是小仙女',
      }
    },

    methods: {
     // 获取打印机列表
     doPrint() {
       if(this.$util.getLocalStorage('printForm') == null){
         // 改用ipc异步方式获取列表，解决打印列数量多的时候导致卡死的问题
         ipcRenderer.send('getPrinterList')
         ipcRenderer.once('getPrinterList', (event, data) => {
           // 过滤可用打印机
           this.printList = data.filter(element => element.status === 0)
           // 1.判断是否有打印服务
           if (this.printList.length <= 0) {
             Message.error('打印服务异常,请尝试重启电脑')
           } else {
             this.$util.setLocalStorage('printForm', this.printList[0].name)
             this.$refs.printRef.print(this.htmlData)
           }
         })
       } else {
         this.$refs.printRef.print(this.htmlData)
       }
     },

    },
    components: {
      printerDiff
    }
  }
</script>

<style lang="scss" scoped>
  

</style>

---

五、在public目录创建print.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>Document</title>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
            font-size: 30px;
        }

        @page {
            margin: 0px;
        }

        .title {
            font-size: 16px;
            padding: 10px 0;
            border-bottom: 1px solid #333333;
        }
    </style>
</head>

<body id="bd"></body>

<script>
  const {ipcRenderer} = window.require('electron')
  ipcRenderer.on('webview-print-render', (event, info) => {
    let obj = ''
    obj += `<div class="title">${info.html}</div>`
    // 执行渲染
    document.getElementById('bd').innerHTML = obj
    ipcRenderer.sendToHost('webview-print-do')
  })
</script>
</html>