chrome中使用AppEmit调用ocx使用文档，vue调用ocx

需求背景

想要在chrome+Vue3项目内调用SDRdCard.ocx神思身份证读取器，因为ocx是IE浏览器内提供的，Vue3不支持IE浏览器。

了解到有安装浏览器插件的方式去实现，但是chrome在2020年12月后不再支持flash(NPAPI)，而微软的edge也不支持ActiveX。

所以选了了使用中间件这种方式

AppEmit：收费和免费【免费版本，每次启动和第20、40、80...分钟时发消息会有弹窗，不在意的话可以选择】
猿大师：收费

开发步骤

创建vue3项目
下载AppEmit

https://www.appemit.com

运行AppEmit

我调用的是SDRdCard.ocx，读取身份证功能，

将SDRdCard.cab解压缩，获得到了下面几个文件
shell 复制代码
```
Getinfo.dll
RdCard.dll
SDRdCard.inf
SDRdCard.ocx
termbt.dll
```

编写安装控件bat命令，将复制文件到系统目录，自行修改下面copy命令将解压后的文件都复制到系统目录

shell 复制代码

# 安装控件64位.bat
cd /d "%~dp0"
copy  SDRdCard.ocx C:\windows\SysWOW64
copy  RdCard.dll C:\windows\SysWOW64
copy  Getinfo.dll C:\windows\SysWOW64
copy  SDRdCard.dll C:\windows\SysWOW64
copy  termbt.dll C:\windows\SysWOW64

C:\windows\SysWOW64\regsvr32 SDRdCard.ocx

# 安装控件32位.bat
cd /d "%~dp0"

copy  SDRdCard.ocx C:\windows\System32
copy  RdCard.dll C:\windows\System32
copy  Getinfo.dll C:\windows\System32
copy  SDRdCard.dll C:\windows\System32
copy  termbt.dll C:\windows\System32

C:\windows\System32\regsvr32 SDRdCard.ocx

根据系统位数安装执行不同的bat命令 安装控件64位.bat或安装控件32位.bat

注意：bat命令要和要移动的文件[SDRdCard.cab解压缩获得的文件]在相同目录
AppEmit根目录放入SDRdCard.ocx文件
双击运行AppEmit.exe文件，首次运行可使用管理员身份运行

在运行的AppEmit根目录编写index.htm

html 复制代码

<html>
<head>
  <title>身份证读取</title>
</head>
<body>
<OBJECT classid=clsid:F1317711-6BDE-4658-ABAA-39E31D3704D3 width=0 height=0 align="center"
        codebase="SDRdCard.cab#version=1,3,6,4" id="SDRdCardDom" HSPACE=0 VSPACE=0>
</OBJECT>
<center><h3> 身份证读取演示 </h3></center>

<input type="button" onclick="javascript:OpenCard()" value="OpenPort" />
<input type="button" onclick="javascript:readCard()" value="readCard" />
<br>
<script language="javascript">

  function OpenCard() {
    const openRes = SDRdCardDom.OpenPort(); // SDRdCard内的方法
    alert('OpenPort：' + (openRes == 0 ? '成功' : '失败'))
  }
  function readCard() {
    const readcardRes =SDRdCardDom.readcard();// SDRdCard内的方法
    alert('readcard:' + (readcardRes == 0 ? '成功' : '失败'))
    if (readcardRes == 0) {
      alert('身份证号：' + SDRdCardDom.CardNo)
    }
  }
</script>
</body>
</html>

编写vue读取组件

html 复制代码

      <template>
        <button @click="resetPage">重新连接</button>
        <div id="AppEmbed1" style="border: solid 2px #F0F0F0; min-width:30px;min-height:20px;width:600px;height:400px" ></div>
      </template>
      <script setup>
      import { onBeforeUnmount, onMounted, ref } from 'vue'
      
      function initAppEmit() {
        // 回调方法-可选
        AE.callbackFunc = [{
          'equ': {
            'service': 'appemit', 'rid': 0, 'clientAuth': 1
          }, 'func': function(res) {
            console.log('✨ websocket连接状态：✨ ', res)
            openPage()
          }
        }]
        // AppEmit默认80端口，可在config.ini内修改
        AE.InitApp('ws://localhost:80/appemit?cid=00000-1&sid=1&flag=1', AE.callbackFunc)
      
      }
      
      // 打开页面
      const openPage = () => {
        const ReqPar = {
          "emit": "open", "Obj": "web", "AppType": 1, "pos": 1, "AppId": 1, "par": {
            "URL": '/index.htm' // *以AppEmit运行目录为根目录，非项目目录*
              , "htmlStr": null
              , "HttpServer_startUrl": null
            	, "embed_object": {//多个object可以设置embed_object为数组
                  "objName": "SDRdCard"
                  , "reg": true    //null 不执行注册   1强制操作 true 未注册则注册  false 卸载注册 (重启AppEmit后，就不能加载dll了)
                  , "asAdmin": 0   //1需要管理员权限注册 0不需要 ,win7管理员身份会有提示确认窗口
                  , "dllFile": "/SDRdCard.ocx" //为了安全，限制为AppEmit文件夹，不能注册或者注销其它文件夹下面的ocx，*所以要将SDRdCard.ocx放在AppEmit运行根目录*
            	}
          }
        };
        AE.OpenApp(ReqPar);
      }
      
      // 重新连接
      function resetPage() {
        AE.CloseApp({}) // 关闭所有
        openPage()
      }
          
      onMounted(() => {
        initAppEmit()
      })
      
      onBeforeUnmount(() => {
        AE.CloseApp({})
      })
      </script>
      <style scoped>
      
      </style>
      ```