vue2控制打印机打印(二)

vue-plugin-hiprint

cmd代码

npm install vue-plugin-hiprint


npm i jquery --save-d

main.js

import { hiPrintPlugin } from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')

import jquery from 'jquery'
Vue.prototype.$ = jquery

html代码

<el-button type="primary" @click="goPrient()">打 印</el-button>

mounted

  mounted(){
    this.init()
  },

methods代码

methods: {
    init() {
      const hiprintTemplate_ = new this.$pluginName.PrintTemplate()
      this.hiprintTemplate = hiprintTemplate_
    },
    goPrient() {
      // 如果在 main.js 中设置了取消自动连接客户端 是获取不到打印机列表的！！！
      if (window.hiwebSocket.opened === false) {
        this.$notify.error('打印机客户端未连接，请点击右上角头像下载打印客户端')
      }

      // 这一句代码 如果打印出来有问题 可以尝试加进去，没有出现 则不用加
      // 初始化 provider
      this.$pluginName.init({
        providers: [defaultElementTypeProvider()]
      })

      // 这一句代码 如果打印出来有问题 可以尝试加进去，没有出现 则不用加
      this.$pluginName.PrintElementTypeManager.buildByHtml(this.$('.ep-draggable-item'))

      // 不要使用 this.hiprintTemplate 打印，会出现重复打印，如果要用，请每次打印 都清空内容
      const hiprintTemplate_ = new this.$pluginName.PrintTemplate()
      const panel = hiprintTemplate_.addPrintPanel({
        'height': 9,
        'width': 20,
        'paperHeader': 0,
        'paperFooter': 30,
        'paperNumberLeft': 26,
        'paperNumberTop': 6,
        'paperNumberDisabled': true,
        'orient': 1,
        'scale': 1
      })
      // 这一块代码是可以 放在 create 页面创建完成后 
      // 打印html内容
      panel.addPrintHtml({ options: { width: 210, height: 297, top: 0, left: 0, content: '<h3>测试</h3>' } })

      // 预览打印
      hiprintTemplate_.print()


      //  打印机列表
      const printerList = hiprintTemplate_.getPrinterList()
      console.info('打印机列表', printerList)

      // 直接打印 - 不带参数
      // hiprintTemplate_.print2()

	 // 直接打印 带参数
	    hiprintTemplate_ntTemplate.print2(null, {
        printer: 'PCL6 V4 Driver for Universal Print', // 指定打印机 打印机 名称
        title: '打印任务名称',
        color: false, // 是否打印颜色 默认 true
        copies: 1, // 打印份数 默认 1
      });

    }
}