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解压缩，获得到了下面几个文件

Getinfo.dll
RdCard.dll
SDRdCard.inf
SDRdCard.ocx
termbt.dll

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

# 安装控件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\SysWOW64C:\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\System32C:\windows\System32\regsvr32 SDRdCard.ocx

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

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

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

<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读取组件

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