0
点赞
收藏
分享

微信扫一扫

Android Studio Gradle Windows下隐藏的编译的坑

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

需求背景

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

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

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

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

开发步骤

  1. 创建vue3项目

  2. 下载AppEmit

    https://www.appemit.com

  3. 运行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\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文件,首次运行可使用管理员身份运行

  4. 在运行的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>
    
  5. 编写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>
      ```

      
举报

相关推荐

0 条评论