VUE实现华视身份证阅读器读取身份证信息
话不多上直接上代码，写的不怎么规范多多包涵，我是在模态框实现的，在这里就只提供模态框代码。最后附上华视身份证阅读器安装文件和浏览器插件链接: [/s/1MdZoPqaIB5LMFoAkFKQDSA/](/s/1MdZoPqaIB5LMFoAkFKQDSA/).提取码：4zeb话不多上直接上代码，写的不怎么规范多多包涵，我是在模态框实现的，在这里就只提供模态框代码。
这是模板代码直接放在之间就可以。
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-buttontype="success"icon="el-icon-plus"size="mini"@click="connect">连接</el-button></el-col><el-col :span="1.5"><el-buttontype="warning"icon="el-icon-download"size="mini"@click="readCert">读卡</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"icon="el-icon-delete"size="mini"@click="disconnect()">断开</el-button></el-col></el-row><el-form ref="form" :model="form" :rules="rules" label-width="150px"><el-form-item label="*姓名：" prop="workerName"><el-input v-model="form.workerName" placeholder="请输入工人姓名" /></el-form-item><el-form-item label="*证件号码：" prop="idCardNumber"><el-input v-model="form.idCardNumber" placeholder="请输入证件号码" /></el-form-item><el-form-item label="*性别："><el-input v-model="form.sex" placeholder="请输入证件号码" /></el-form-item><el-form-item label="身份证照片：" prop="sfzImage"><img v-if="sfzImage==null" src="../../../assets/image/timg.jpg" height="200px" width="200px"/><img v-else :src="sfzImage" height="200px" width="200px"/></el-form-item><el-form-item label="*民族：" prop="nation"><el-input v-model="form.nation" placeholder="请输入民族" /></el-form-item><el-form-item label="出生日期：" prop="csrq"><el-input id="expDate" v-model="form.csrq" placeholder="请输入出生日期" /></el-form-item><el-form-item label="身份证有效起日期：" prop="sfzyxqrq"><el-input v-model="form.sfzyxqrq" placeholder="请输入身份证有效起日期" /></el-form-item><el-form-item label="身份证有效止日期：" prop="sfzyxzrq"><el-input v-model="form.sfzyxzrq" placeholder="请输入身份证有效止日期" /></el-form-item><!--检测是否装有插件--><object id="CertCtl" type="application/cert-reader" width="0" height="0"><p style="color:#FF0000;">控件未安装或不可用，请检查安装后在使用！</p></object></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>
这是Vue.js直接放在之间就可以。
<script>export default {data() {return {CertCtl:'',// 查询参数queryParams: {workerName: undefined,sex: undefined,idCardNumber: undefined,csrq: undefined,sfzyxqrq: undefined,sfzyxzrq: undefined,nation: undefined,sfzImage: null,},// 表单参数form: {},// 表单校验rules: {}};},created() {this.getList();},methods: {// 表单重置reset() {this.form = {workerName: undefined,sex: undefined,idCardNumber: undefined,csrq: undefined,sfzyxqrq: undefined,sfzyxzrq: undefined,nation: undefined,sfzImage: null,};this.resetForm("form");},//SFZ阅读器连接connect(){this.reset();try {const result = CertCtl.connect();this.sfzImage=null;} catch (e) {}},//读取SFZ阅读器readCert(){this.reset();const result = CertCtl.readCert();let resultObj = JSON.parse(result);this.form.workerName=resultObj.resultContent.partyName;this.form.idCardNumber=resultObj.resultContent.certNumber;this.form.sex=resultObj.resultContent.gender;this.form.nation=resultObj.resultContent.nation;this.form.csrq=resultObj.resultContent.bornDay;this.form.sfzyxqrq=resultObj.resultContent.effDate;this.form.sfzyxzrq=resultObj.resultContent.expDate;this.sfzImage="data:image/jpeg;base64,"+ resultObj.resultContent.identityPic;},//断开连接disconnect(){this.reset();try{const result = CertCtl.disconnect();this.sfzImage=null;} catch (e){}},}};</script>
