VUE实现华视身份证阅读器读取身份证信息(本文分两种情况 第一中是点击按钮读取信息

本文是用了vue+element来实现华视身份证读卡器读取身份信息的，当然在开发之前要做好前提准备，就是厂家提供对应设备的api和安装对应的驱动。本文通过两种方法来实现读取信息，第一种是点击按钮读取信息，第二种是卡片放上去会自动读取信息。

点击按钮读取信息：

<template><div><el-button type="success" @click="readIDCard">读取身份证</el-button><el-dialog title="读取身份证信息" :visible.sync="showDialog" width="500px" append-to-body :before-close="closeDialog"><el-form :model="IDCardForm" ref="IDCardForm" :rules="rules" label-width="150px"><el-form-item label="姓名:" prop="name"><el-input v-model="IDCardForm.name" placeholder="请输入姓名"></el-input></el-form-item><el-form-item label="证件号码:" prop="idCardNumber"><el-input v-model="IDCardForm.idCardNumber" placeholder="请输入证件号码"></el-input></el-form-item><el-form-item label="性别:" prop="sex"><el-input v-model="IDCardForm.sex" placeholder="请输入性别"></el-input></el-form-item><el-form-item label="身份证照片：" prop="sfzImage"><img v-if="IDCardForm.sfzImage==null" src="../../../dist/img/img.146655c9.jpg" height="100px" width="100px" /><img v-else :src="IDCardForm.sfzImage" height="100px" width="100px" /></el-form-item><el-form-item label="民族:" prop="nation"><el-input v-model="IDCardForm.nation" placeholder="请输入民族"></el-input></el-form-item><el-form-item label="出生日期:" prop="birthday"><el-input v-model="IDCardForm.birthday" placeholder="请输入出生日期"></el-input></el-form-item><el-form-item label="身份证有效起日期:" prop="sfzyxqrq"><el-input v-model="IDCardForm.sfzyxqrq" placeholder="请输入身份证有效起日期"></el-input></el-form-item><el-form-item label="身份证有效起日期:" prop="sfzyxzrq"><el-input v-model="IDCardForm.sfzyxzrq" placeholder="请输入身份证有效起日期"></el-input></el-form-item><!--检测是否装有插件--><object id="CertCtl" ref="CertCtl" type="application/cert-reader" width="0" height="0"><p style="color:#FF0000;">控件未安装或不可用，请检查安装后在使用！</p></object></el-form><el-row :gutter="20" class="mb8"><el-col :span="8"><el-button type="success" icon="el-icon-plus" size="mini" @click="connect">连接</el-button></el-col><el-col :span="8"><el-button type="warning" icon="el-icon-download" size="mini" @click="readCert">读卡</el-button></el-col><el-col :span="8"><el-button type="danger" icon="el-icon-delete" size="mini" @click="disconnect()">断开</el-button></el-col></el-row><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="showDialog=false">取 消</el-button></div></el-dialog></div></template><script>export default {data() {return {// 对话框的显隐showDialog: false,CertCtl: '',// 查询参数IDCardForm: {name: "", // 姓名idCardNumber: "", // 身份证号码sex: "", // 性别nation: "", // 民族birthday: "", // 出生日期sfzyxqrq: "", //身份证有效起日期sfzyxzrq: "", // 身份证有效止日期sfzImage: null // 身份证照片},// 表单参数// IDCardForm: {},rules: {}}},methods: {// 重置表单reset() {this.IDCardForm = {name: "", // 姓名idCardNumber: "", // 身份证号码sex: "", // 性别nation: "", // 民族birthday: "", // 出生日期sfzyxqrq: "", //身份证有效起日期sfzyxzrq: "", // 身份证有效止日期sfzImage: null // 身份证照片}// this.resetForm("IDCardForm")},// 读取身份证按钮readIDCard() {this.showDialog = true},// 对话框的右上角那个叉叉closeDialog() {this.showDialog = false},// 对话框的确定按钮submitForm() {this.showDialog = false},// 连接读卡器connect() {this.reset();try {const result = CertCtl.connect();let resultObj = JSON.parse(result);this.IDCardForm.sfzImage = nullconsole.log("1111", resultObj);// 判断状态是否连接成功if (resultObj.resultFlag == "0") {this.$message.warning("连接成功")}} catch (e) {}},// 读卡readCert() {this.reset()const result = CertCtl.readCert();let resultObj = JSON.parse(result);console.log("2222", resultObj);this.IDCardForm.name = resultObj.resultContent.partyName;this.IDCardForm.idCardNumber = resultObj.resultContent.certNumber;this.IDCardForm.sex = resultObj.resultContent.gender;this.IDCardForm.nation = resultObj.resultContent.nation;this.IDCardForm.birthday = resultObj.resultContent.bornDay;this.IDCardForm.sfzyxqrq = resultObj.resultContent.effDate;this.IDCardForm.sfzyxzrq = resultObj.resultContent.expDate;this.IDCardForm.sfzImage = "data:image/jpeg;base64," + resultObj.resultContent.identityPic;},// 断开连接disconnect() {// this.reset();try {const result = CertCtl.disconnect();let resultObj = JSON.parse(result);this.IDCardForm.sfzImage = null;console.log("3333", resultObj);if (resultObj.resultFlag == "1") {this.$message.warning("连接已断开")}} catch (e) {}}},}</script><style></style>

实现的效果图是：

点击读取身份证，会出现一个弹框，然后先点击连接，会提示连接成功，再点击读卡，就会把身份证信息给显示再里面的输入框中，最后点击断开，则会断开连接，下次进来还得要点击连接才行，如果不点断开的话，下次进来可以直接点击读卡。这是点击按钮读卡的。

2. 自动读取信息的（代码如下）

<template><div><el-button type="success" @click="readIDCard">自动读取身份证</el-button><el-dialog title="读取身份证信息" :visible.sync="showDialog" width="500px" append-to-body :before-close="closeDialog"><el-form :model="IDCardForm" ref="IDCardForm" :rules="rules" label-width="150px"><el-form-item label="姓名:" prop="name"><el-input v-model="IDCardForm.name" placeholder="请输入姓名"></el-input></el-form-item><el-form-item label="证件号码:" prop="idCardNumber"><el-input v-model="IDCardForm.idCardNumber" placeholder="请输入证件号码"></el-input></el-form-item><el-form-item label="性别:" prop="sex"><el-input v-model="IDCardForm.sex" placeholder="请输入性别"></el-input></el-form-item><el-form-item label="身份证照片：" prop="sfzImage"><img v-if="IDCardForm.sfzImage==null" src="../../../dist/img/img.146655c9.jpg" height="100px" width="100px" /><img v-else :src="IDCardForm.sfzImage" height="100px" width="100px" /></el-form-item><el-form-item label="民族:" prop="nation"><el-input v-model="IDCardForm.nation" placeholder="请输入民族"></el-input></el-form-item><el-form-item label="出生日期:" prop="birthday"><el-input v-model="IDCardForm.birthday" placeholder="请输入出生日期"></el-input></el-form-item><el-form-item label="身份证有效起日期:" prop="sfzyxqrq"><el-input v-model="IDCardForm.sfzyxqrq" placeholder="请输入身份证有效起日期"></el-input></el-form-item><el-form-item label="身份证有效起日期:" prop="sfzyxzrq"><el-input v-model="IDCardForm.sfzyxzrq" placeholder="请输入身份证有效起日期"></el-input></el-form-item><!--检测是否装有插件--><object id="CertCtl" ref="CertCtl" type="application/cert-reader" width="0" height="0"><p style="color:#FF0000;">控件未安装或不可用，请检查安装后在使用！</p></object></el-form><el-row :gutter="20" class="mb8"><el-col :span="8"><el-button type="success" icon="el-icon-plus" size="mini" @click="connect">连接</el-button></el-col><!-- <el-col :span="8"><el-button type="warning" icon="el-icon-download" size="mini" @click="readCert">读卡</el-button></el-col> --><el-col :span="8"><el-button type="danger" icon="el-icon-delete" size="mini" @click="disconnect()">断开</el-button></el-col></el-row><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancelForm">取 消</el-button></div></el-dialog></div></template><script>export default {data() {return {// 对话框的显隐showDialog: false,CertCtl: '',// 查询参数IDCardForm: {name: "", // 姓名idCardNumber: "", // 身份证号码sex: "", // 性别nation: "", // 民族birthday: "", // 出生日期sfzyxqrq: "", //身份证有效起日期sfzyxzrq: "", // 身份证有效止日期sfzImage: null // 身份证照片},// 表单参数// IDCardForm: {},rules: {},timer: ""}},methods: {// 重置表单reset() {this.IDCardForm = {name: "", // 姓名idCardNumber: "", // 身份证号码sex: "", // 性别nation: "", // 民族birthday: "", // 出生日期sfzyxqrq: "", //身份证有效起日期sfzyxzrq: "", // 身份证有效止日期sfzImage: null // 身份证照片}// this.resetForm("IDCardForm")},// 读取身份证按钮readIDCard() {this.showDialog = true},// 对话框的右上角那个叉叉closeDialog() {this.showDialog = false;clearInterval(this.timer)},// 对话框的确定按钮submitForm() {this.showDialog = false},// 对话框的取消按钮cancelForm() {this.showDialog = false;// 清除定时器clearInterval(this.timer);},// 连接读卡器connect() {this.reset();try {const result = CertCtl.connect();let resultObj = JSON.parse(result);this.IDCardForm.sfzImage = null// 判断状态是否连接成功if (resultObj.resultFlag == "0") {this.$message.warning("连接成功")}} catch (e) {}// 设置定时器 每三秒调用一次方法，就是每三秒读卡读取一次this.timer = setInterval(this.readCertAuto, 3000);},// 读卡readCertAuto() {this.reset()const result = CertCtl.readCert();let resultObj = JSON.parse(result);console.log("2222", resultObj);this.IDCardForm.name = resultObj.resultContent.partyName;this.IDCardForm.idCardNumber = resultObj.resultContent.certNumber;this.IDCardForm.sex = resultObj.resultContent.gender;this.IDCardForm.nation = resultObj.resultContent.nation;this.IDCardForm.birthday = resultObj.resultContent.bornDay;this.IDCardForm.sfzyxqrq = resultObj.resultContent.effDate;this.IDCardForm.sfzyxzrq = resultObj.resultContent.expDate;this.IDCardForm.sfzImage = "data:image/jpeg;base64," + resultObj.resultContent.identityPic;},// 断开连接disconnect() {// this.reset();try {const result = CertCtl.disconnect();let resultObj = JSON.parse(result);this.IDCardForm.sfzImage = null;if (resultObj.resultFlag == "1") {this.$message.warning("连接已断开")}clearInterval(this.timer);} catch (e) {}}},destroyed() {clearInterval(this.timer)}}</script><style></style>

显示的效果如图所示

点击连接之后，会提示连接成功，然后你把卡片放上去，里面的输入框就会显示出身份信息，拿出来之后信息会没掉，但是你如果再次把卡放在读卡器上面，则信息还会显示出来，但是我这边代码是没用把内容清空，你们可以自己加上去，如果断开就清空表单。这个按照个人意愿来。

自动读取身份信息我是通过设置一个定时器，每隔3秒会读取一次，如果一直没放上去卡片的话，也会一直再读取信息，但是再控制台里面会一直报错就是了，毕竟你没放卡片上去。

以上就是我对VUE+element实现华视身份证阅读器读取身份证信息的理解和代码内容，如果哪里写的不好或者说的不好，望各位谅解和指点。本文也是参考了一位大佬的代码而做出的其他的补充，这位大佬代码在这，[参考的代码内容](/weixin_43912548/article/details/107187352)在这位这里还有华视身份证阅读器的api和接口说明文件。

VUE实现华视身份证阅读器读取身份证信息(本文分两种情况 第一中是点击按钮读取信息 一种是自动读取信息)