git clone https://github.com/sunnie1992/electron-vue-print-demo.gitnpm installnpm run electron:serve

<template> <div id="app">  <el-button type="primary" @click="showPrint">設置打印機</el-button>  <printDialog :dialog-visible="dialogVisible" @cancel="handlePrintDialogCancel" />  <pinter ref="print" :html-data="HtmlData"></pinter>  <el-table :data="tableData" style="width: 100%">   <el-table-column prop="date" label="日期" width="180" column-key="date">   </el-table-column>   <el-table-column prop="name" label="姓名" width="180">   </el-table-column>   <el-table-column prop="address" label="地址">   </el-table-column>   <el-table-column label="操作">    <template slot-scope="scope">     <el-button type="primary" @click="doPrint(scope.row)">打印</el-button>    </template>   </el-table-column>  </el-table> </div></template><script>import { ipcRenderer } from 'electron'import printDialog from './components/PrintDialog.vue'import Pinter from './components/pinter.vue'export default { name: 'App', components: {  Pinter,  printDialog }, data() {  return {   dialogVisible: false,   HtmlData: '',   printList: [],   tableData: [{    date: '2016-05-02',    name: '我是小仙女',    address: '上海市浦東新區',    tag: '家'   }, {    date: '2016-05-04',    name: '我是小仙女1',    address: '上海市浦東新區',    tag: '公司'   }, {    date: '2016-05-01',    name: '我是小仙女2',    address: '上海市浦東新區',    tag: '家'   }, {    date: '2016-05-03',    name: '我是小仙女3',    address: '上海市浦東新區',    tag: '公司'   }]  } }, mounted() { }, methods: {  showPrint() {   this.dialogVisible = true  },  handlePrintDialogCancel() {   this.dialogVisible = false  },  doPrint(row) {   this.HtmlData = row.name   this.$refs.print.print(row.name)  } }}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>

<template> <div class="container">  <webview id="printWebview" ref="printWebview" :src="fullPath" nodeintegration />  <printDialog :dialog-visible="dialogVisible" @cancel="handlePrintDialogCancel" @select-print="printSelectAfter" /> </div></template><script>import { ipcRenderer } from 'electron'import path from 'path'import printDialog from './PrintDialog.vue'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', (event) => {   if (event.channel === 'webview-print-do') {    console.log(this.printDeviceName)    webview.print(     {      silent: true,      printBackground: true,      deviceName: this.printDeviceName     },     (data) => {      this.messageBox.close()      if (data) {       this.$emit('complete')      } else {       this.$emit('cancel')      }     },    )   }  }) }, 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) {     this.$message({      message: '打印服務異常,請嘗試重啟電腦',      type: 'error'     })     this.$emit('cancel')    } else {     this.checkPrinter()    }   })  },  // 2.判斷打印機狀態  checkPrinter() {   // 本地獲取打印機   const printerName = this.$electronStore.get('printForm') || ''   const printer = this.printList.find(device => device.name === printerName)   // 有打印機設備并且狀態正常直接打印   if (printer && printer.status === 0) {    this.printDeviceName = printerName    this.printRender()   } else if (printerName === '') {    this.$message({     message: '請先設置其他打印機',     type: 'error',     duration: 1000,     onClose: () => {      this.dialogVisible = true     }    })    this.$emit('cancel')   } else {    this.$message({     message: '當前打印機不可用,請重新設置',     type: 'error',     duration: 1000,     onClose: () => {      this.dialogVisible = true     }    })   }  },  handlePrintDialogCancel() {   this.$emit('cancel')   this.dialogVisible = false  },  printSelectAfter(val) {   this.dialogVisible = false   this.$electronStore.set('printForm', val.name)   this.printDeviceName = val.name   this.printRender()  },  printRender(html) {   this.messageBox = this.$message({    message: '打印中，請稍后',    duration: 0   })   // 獲取<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>

 <script>  const { ipcRenderer } = require('electron')  ipcRenderer.on('webview-print-render', (event, info) => {   // 執行渲染   document.getElementById('bd').innerHTML = info.html   ipcRenderer.sendToHost('webview-print-do')  }) </script> 

import ElectronStore from 'electron-store'// ElectronStore 默認數據import electronDefaultData from './config/electron-default-data'let electronStoreapp.on('ready', async() => { // 初始化配置文件 electronStore = new ElectronStore({  defaults: electronDefaultData,  cwd: app.getPath('userData') }) global.electronStore = electronStore})

// eslint-disable-next-lineimport { remote } from 'electron'export default { /* eslint no-param-reassign: "error" */ install(Vue) {  Vue.prototype.$electronStore = remote.getGlobal('electronStore')  }}