vue-plugin-hiprint的学习与应用

?? 生命不息，写作不止
?? 继续踏上学习之路，学之分享笔记
?? 总有一天我也能像各位大佬一样
?? 一个有梦有戏的人 @怒放吧德德
??分享学习心得，欢迎指正，大家一起学习成长！

生命不息，写作不止，养成良好的学习精神！

• https://github.com/CcSimple/vue-plugin-hiprint
  print.io官网：http://hiprint.io/demo

  引入插件：

  jsbarcode：

  npm install jsbarcode --save
  

  socket.io：

  npm install socket.io
  

  jspdf：

  npm install jspdf --save
  

  代码简单介绍

  面板

  分别是：拖拽组件、画布、属性栏

  初始化

  在挂载中调用初始化

  mounted() {
    this.init()
    this.otherPaper()
  },
  

  其中初始化方法：

  init() { // 左边设计模板的选择
    this.modeList = providers.map((e) => {
      return {type: e.type, name: e.name, value: e.value}
    })
    this.changeMode()
  },
  changeMode() { // 数据渲染
    let {mode} = this
    let provider = providers[mode]
    console.log("provider", provider)
    hiprint.init({
      providers: [provider.f]
    });
    $('.hiprintEpContainer').empty()
    hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value);
    $('#hiprint-printTemplate').empty()
    let templates = this.$ls.get('KEY_TEMPLATES', {}) // 从本地获取数据
    console.log("getTemplates", templates)
    let template = templates[provider.value] ? templates[provider.value] : {}
    hiprintTemplate = new hiprint.PrintTemplate({
      template: template, // panels: [{...}]
      dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
      history: true, // 是否需要 撤销重做功能
      onDataChanged: (type, json) => {
        console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
        console.log(json); // 返回 template
        // 更新模板
        hiprintTemplate.update(json)
        // console.log(hiprintTemplate.historyList)
      },
      settingContainer: '#PrintElementOptionSetting',
      paginationContainer: '.hiprint-printPagination'
    });
    hiprintTemplate.design('#hiprint-printTemplate');
    console.log('hiprintTemplate', hiprintTemplate);
    // 获取当前放大比例, 当zoom时传true 才会有
    this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
  },
  

  设置纸张大小

  otherPaper() {
    let value = {}
    value.width = this.paperWidth
    value.height = this.paperHeight
    this.paperPopVisible = false
    this.setPaper('other', value)
  },
  /**
   * 设置纸张大小
   * @param type [A3, A4, A5, B3, B4, B5, other]
   * @param value {width,height} mm
   */
  setPaper(type, value) {
    try {
      if (Object.keys(this.paperTypes).includes(type)) {
        this.curPaper = {type: type, width: value.width, height: value.height}
        hiprintTemplate.setPaper(value.width, value.height)
      } else {
        this.curPaper = {type: 'other', width: value.width, height: value.height}
        hiprintTemplate.setPaper(value.width, value.height)
      }
    } catch (error) {
      this.$message.error(`操作失败: ${error}`)
    }
  },
  

  通过生命周期activated来解决切换模板的时候还能拖拽，并且不会被清除

  activated() {
    // 重新再实例化, 处理切换demo, 无法拖拽问题
    if (this.deactivated) {
      this.changeMode();
      this.deactivated = false;
    }
  },
  deactivated() {
    this.deactivated = true;
  },
  

  预览

  封装的预览vue界面
  将模板和数据用HTML的方法转化赋值 $('#preview_content_custom').html(hiprintTemplate.getHtml(printData))

  直接打印

  直接打印需要安装桌面插件，window.hiwebSocket.opened是为了判断socketIo是否打开，hiprintTemplate中的print2是直接打印，print是会显示预览的打印。直接打印在printIo底层会自动去连接客户端，以及传输数据。

  print() {
    if (window.hiwebSocket.opened) {
      const printerList = hiprintTemplate.getPrinterList();
      console.log(printerList) // 打印机列表数据
      console.log('printData', printData) // 数据源
      hiprintTemplate.print2(printData, {printer: '', title: 'hiprint测试直接打印'});
      return
    }
    this.$message.error('客户端未连接,无法直接打印')
  },
  

  批量打印

  批量打印就是采用队列打印的方式，通过TaskRunner 任务进程管理，在通过for循环收集数据去打印。

  batPrint() { // 批量打印
    if (window.hiwebSocket.opened) {
      const printerList = hiprintTemplate.getPrinterList();
      console.log(printerList) // 打印机列表
      this.tasksPrint()
      return
    }
    this.$message.error('客户端未连接,无法直接打印')
  },
  tasksPrint() { // 队列打印
    const runner = new TaskRunner();
    runner.setConcurrency(1); // 同时执行数量
    const task = []
    let that = this
    const tasksKey = `open${Date.now()}`;
    for (let i = 0; i < testDatas.table.length; i++) { // 循环数据
      // done -> 任务完成回调
      let key = `task${i}`;
      task.push(done => {
        let printData = {
          testChinese: testDatas.table[i].testChinese,
          testEnglish: testDatas.table[i].testEnglish
        } // 动态数据
        console.log('printData', printData)
        that.realPrint(runner, done, key, i, printData, tasksKey)
      })
    }
    runner.addMultiple(task)
    this.openNotification(runner, tasksKey)
  },
  realPrint(runner, done, key, i, printData, tasksKey) {
    let that = this
    that.$notification.info({
      key: key,
      placement: 'topRight',
      duration: 2.5,
      message: `正在准备打印第 ${i} 张`,
      description: '队列运行中...',
    });
    let template = that.$ls.get('KEY_TEMPLATES', {}) // 外層還有個模板名包裹
    let hiprintTemplate = new hiprint.PrintTemplate({
      template: template.aProviderModule,
    });
    hiprintTemplate.print2(printData, {printer: '', title: key});
    hiprintTemplate.on('printSuccess', function () {
      let info = runner.tasks.list.length > 1 ? '准备打印下一张' : '已完成打印'
      that.$notification.success({
        key: key,
        placement: 'topRight',
        message: key + ' 打印成功',
        description: info,
      });
      done()
      if (!runner.isBusy()) {
        that.$notification.close(tasksKey)
      }
    })
    hiprintTemplate.on('printError', function () {
      that.$notification.close(key)
      done()
      that.$message.error('打印失败，已加入重试队列中')
      runner.add(that.realPrint(runner, done, key, i, printData))
    })
  },
  openNotification(runner, tasksKey) {
    let that = this;
    that.$notification.open({
      key: tasksKey,
      message: '队列运行中...',
      duration: 0,
      placement: 'topLeft',
      description: '点击关闭所有任务',
      btn: h => {
        return h(
            'a-button',
            {
              props: {
                type: 'danger',
                size: 'small',
              },
              on: {
                click: () => {
                  that.$notification.close(tasksKey);
                  // 详情请查阅文档
                  runner.removeAll();
                  that.$message.info('已移除所有任务');
                },
              },
            },
            '关闭任务',
        );
      },
    });
  }
  

  保存JSON数据

  只要调用apihiprintTemplate.getJson()

  saveJson() {
    if (hiprintTemplate) {
      const jsonOut = JSON.stringify(hiprintTemplate.getJson() || {})
      console.log(jsonOut)
    }
  },
  

  自定义组件

  封装js中，使用addPrintElementTypes方法添加自定义的组件，可以查看print.io官方文档来配置参数。通过控制台输入window.HIPRINT_CONFIG可以查看配置参数名。

  new hiprint.PrintElementTypeGroup("自定义表格1", [
    {
      tid: 'aProviderModule.customText1',
      title: '表格标题',
      customText: '自定义文本',
      custom: true,
      width: 120,
      type: 'text',
      options: {
        height: 31.5,
        hideTitle: true,
        field: 'testEnglish',
        fontSize: 20.25,
        color: '#000000',
        backgroundColor: '#ffffff',
        textAlign: 'center',
        textContentVerticalAlign: 'middle',
        lineAlign: 'center',
        borderLeft: 'solid',
        borderTop: 'solid',
        borderRight: 'solid',
        borderBottom: 'solid'
      }
    },
    {
      tid: 'aProviderModule.customText2',
      title: '表格内容',
      customText: '自定义文本',
      custom: true,
      width: 120,
      type: 'text',
      options: {
        hideTitle: true,
        field: 'testChinese',
        height: 31.5,
        fontSize: 20.25,
        color: '#000000',
        backgroundColor: '#ffffff',
        textAlign: 'center',
        textContentVerticalAlign: 'middle',
        lineAlign: 'center',
        borderLeft: 'solid',
        borderTop: 'solid',
        borderRight: 'solid',
        borderBottom: 'solid'
      }
    },
  ]),
  

  ??创作不易，如有错误请指正，感谢观看！记得点个赞哦！??