Electron реализует бесшумную печать

Electron

предисловие

electron+vuecli3 реализует функцию настройки принтера и печати чека в автоматическом режиме

Информации по этому поводу в интернете относительно мало, поделюсь здесь, надеюсь, вы сможете меньше наступать на какие-то ямы.
гитхаб-адрес

Следует подчеркнуть, что версия электрона должна быть 3.0.0.Я пробовал 4 и 5, и ни один из них не добился этого.

визуализация

 

использовать

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

выполнить

Идеи операций
1. Пользователь нажимает печать
2. Запросите локальное электронное хранилище (используемое для локального хранения и чтения данных), сохранено ли имя принтера.
3. Уже установлено, печатать напрямую
4. Если настройки отсутствуют, появится всплывающее окно установки принтера.
5. После того, как пользователь установил подтверждение, распечатайте

На домашней странице App.vue представлены два компонента, один из которых — всплывающее окно printDialog, которое активно настраивает принтер.

clipboard.png

Другой — компонент печати.Печать — это рендеринг содержимого для печати на html-странице через веб-просмотр, а затем его печать.

<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>

APP.VUE запускает метод печати компонента каждый раз, когда нажимается кнопка печати, и передает данные в this.$refs.print.print(row.name)
print.vue запрашивает принтер, а затем вызывает метод печати printRender.

<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>

public/print.html отправляет команду печати после успешного рендеринга страницы веб-просмотра

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

Здесь используется электронный магазин для доступа к локальным данным.
background.js вводит начальное монтирование в глобальном масштабе

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

src/plugins/inject.js
Зарегистрировать $electronStore

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

Затем вы можете прочитать в файле vue
this.electronStore.get('printForm')а такжеthis.electronicStore.get('printForm') и это.electronStore.set('printForm', val.name)

обо мне

Для получения дополнительных статей по технической тематике обратите внимание на общедоступный аккаунт «Front-end Girls' School».

Ответить на интерфейс, вы можете присоединиться к «Fairy Fairy Group»

Вы можете отсканировать и добавить WeChat ниже, отметить Сола и добавить группу внешнего общения для обмена и обучения.

Если это вам поможет, пришлите мне звездочку (づ￣3￣)づ╭❤～

Категории