• vue中使用就J10设备刷身份证，获取用户身份证信息并登录系统,项目用的是element组件，所以部分为element里的元素。

image.png

• 如图所示，找到驱动安装的位置，然后用编辑器打开测试页找到object标签

<object id="objActiveX" classid="clsid:A66F5373-xxxx-xxxx-xxxx-38A87B331D40" width=0 height=0"></object>

templete部分

复制到vue文件中，并添加内部样式position:absolute取消占位，添加input标签，大小设置为1像素，背景色、文字颜色，border等设置透明用来获取焦点，代码如下：

<template>
    <div class="home">
        <object style="position:absolute" id="objActiveX" classid="clsid:A66F5373-xxxx-xxxx-xxxx-38A87B331D40" width="0" height="0"></object>
        <div class="head">
            <el-row>
                <el-col :span="20">
                    <div class="title">
                        <img class="logo" src="@/assets/imgs/logo.png"/>
                        <span>法院&nbsp;&nbsp;|&nbsp;&nbsp;自助诉服系统</span>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="adv">
                        <img src="@/assets/imgs/backhome.png" @click="backHome"/>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="mainSty">
            <div class="title">请将身份证放在感应区</div>
            <img class="picStyle" src="@/assets/imgs/login.png"/>
            <input class="readInfo" type="text" v-model="IDnum" readonly/>
        </div>
    </div>
</template>

js部分

进入页面调用开启设备，读取身份证信息，一般为每三秒调用一次，太频繁的话会比较卡，获取信息成功后保存，记得关闭设备

methods: {
        // 身份证登录-打开设备
        hxgc_OpenReader(){  
            let iResult = 0;
            iResult = objActiveX.hxgc_OpenReader(this.g_iPort);// 打开设备
            if(iResult == 0){
                // this.$message.success("打开设备成功.");
                let strSAMID = objActiveX.hxgc_GetSamIdToStr(this.g_iPort);/ /获取SAMID
                this.hxgc_ReadIDCard();
            }else{
                // this.$message.error("打开设备失败，错误代码：" + iResult + ".");
            }
        },
        // 读取二代身份证
        hxgc_ReadIDCard() { 
            let iResult = 0;        
            console.log("你不放身份证我就一直读~~");    
            iResult = objActiveX.hxgc_ReadIDCard(this.g_iPort);//读二代证
            if(iResult == 0){
            // this.$message.success("身份证信息可以读啦.")
                this.userName = objActiveX.hxgc_GetName(); // 姓名
                this.IDnum = objActiveX.hxgc_GetIDCode();  //身份证号 
                if(this.IDnum !== "" ){
                      // 这里写读取成功后需要做的事情

                     // 关闭定时器
                    window.clearInterval(this.getId);
                     // 关闭设备
                    this.hxgc_CloseReader();
                }
            }else{
                this.$message.error("读二代证信息失败，请重新读取身份证信息，错误代码：" + iResult + ".")
            }
        },
        // 关闭设备
        hxgc_CloseReader(){  
            let iResult = 0;
            iResult = objActiveX.hxgc_CloseReader(this.g_iPort);//关闭设备
            if(iResult == 0){
            }else{
                this.$message.error("关闭设备失败，错误代码：" + iResult + ".");
            }
        }
    },
    created(){
        // 开启J10设备  每3s调用一次，读取成功后获取自己想要的信息，记得关闭设备
        this.getId = setInterval(this.hxgc_OpenReader, 3000);
    },
    beforeDestroy(){
        clearInterval(this.hxgc_OpenReader);
    }