activeX控件在vue项目和js原生中的使用

注意：该控件只能在IE浏览器中使用
使用之前要在IE浏览器进行设置：设置-Internet选项-安全/自定义级别-Active控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本，选择"启用"或者"提示"）

1.在js原生中的使用

1.1引入activeX控件。代码如下：

<object classid="clsid:5C39237F-7BD0-404E-ACAE-AF3C00FFA88A" codebase="UhfAx.CAB#version=1,0,0,1" height="0" id="uhfAx" style="display:none" viewastext width="0"></object>

1.2建立回调函数

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
    function comm_OnComm(param) {
        console.log(param);   //返回的数据
        var objData = JSON.parse(param); 
    }
</SCRIPT>
<SCRIPT EVENT=FireOnRfidCallBackMsg(param) FOR=uhfAx LANGUAGE=javascript>
    comm_OnComm(param)
</SCRIPT>

1.3初始化控件

// 初始化控件
function initUhfAx() {
    try {
        uhfAx = document.getElementById("uhfAx");
        //加载UHF库
        var json = uhfAx.axMul_loadRFIDLib();
        var obj = JSON.parse(json);
        if (obj.status == 0) {
            handle = obj.handle;
            //初始化RFID
            uhfAx.axMul_initRFID(parseInt(handle));
        }
    } catch (e) {
        alert("初始化失败, 请检查环境配置");
    }
}

1.4建立连接

//设置RF模块物理连接模式
this.uhfAx.axSetRFConnectMode(1);
//设置RF模块类型
this.uhfAx.axSetRFModuleType(2);
//打开连接
this.uhfAx.axConnectRemoteNetwork('192.168.1.16', 1200);
//开始盘点
this.uhfAx.axStartInventory(1, 0);

开始盘点后将会在回调函数中返回数据

2. 在vue中的使用

要利用节点的方式创建：
2.1.创建object标签

let obj = document.createElement('object')
obj.setAttribute('id', 'uhfAx')
obj.setAttribute('ref', 'uhfAx')
obj.setAttribute('classid', 'clsid:5C39237F-7BD0-404E-ACAE-AF3C00FFA88A')
obj.setAttribute('width', 1500)
obj.setAttribute('height', 0)
let _obj = document.getElementById("act");
_obj.appendChild(obj)

2.2.创建script回调标签

let scriptStr = document.createElement('SCRIPT')
scriptStr.setAttribute('FOR', 'uhfAx')
scriptStr.event = 'FireOnRfidCallBackMsg(param)'
scriptStr.appendChild(document.createTextNode('activeXListener.wakeUp(param)'))
_obj.appendChild(scriptStr)

这一步要在mounted钩子中加上代码：

mounted() {
  window.activeXListener = this
  this.initObject()
},

2.3完整代码

<template>
    <div class="card-main">
        <div id="act"></div>
    </div>
</template>

<script>
  export default {
    props: {
      hdlId: {
        type: String
      }
    },
    name: 'outCard',
    data() {
      return {
        dataArr: [],
        uhfAx: ''
      }
    },
    mounted() {
      window.activeXListener = this
      this.initObject()
    },
    methods: {
      initObject() {
        let obj = document.createElement('object')
        obj.setAttribute('id', 'uhfAx')
        obj.setAttribute('ref', 'uhfAx')
        obj.setAttribute('classid', 'clsid:5C39237F-7BD0-404E-ACAE-AF3C00FFA88A')
        obj.setAttribute('width', 1500)
        obj.setAttribute('height', 0)
        let _obj = document.getElementById("act");
        _obj.appendChild(obj)

        let scriptStr = document.createElement('SCRIPT')
        scriptStr.setAttribute('FOR', 'uhfAx')
        scriptStr.event = 'FireOnRfidCallBackMsg(param)'
        scriptStr.appendChild(document.createTextNode('activeXListener.wakeUp(param)'))
        _obj.appendChild(scriptStr)

        try {
          this.uhfAx = document.getElementById("uhfAx");
          // 初始化库函数(0 -- 成功, 否则失败)AfxOleInit
          let retVal = JSON.parse(this.uhfAx.axInitRFID());
          // console.log(retVal);
        } catch (e) {
          alert("初始化失败, 请检查环境配置");
        }

        //设置RF模块物理连接模式
        this.uhfAx.axSetRFConnectMode(1);
        //设置RF模块类型
        this.uhfAx.axSetRFModuleType(2);
        //打开连接
        this.uhfAx.axConnectRemoteNetwork('192.168.1.16', 1200);
        //开始盘点
        this.uhfAx.axStartInventory(1, 0);
      },
      wakeUp(param) {
        // 解析数据
        const objData = JSON.parse(param);
        if ("INVENTORY" == objData.Option) {
          const inventory = JSON.parse(objData.Data);
          let epc = inventory.epc
          this.dataArr.push(epc)
          let s = new Set(this.dataArr)
          let newArr = Array.from(s)
          console.log(this.dataArr)
          console.log(newArr)
        }
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
</style>