VUE实现华视身份证阅读器读取身份证信息(本文分两种情况，第一中是点击按钮读取信息，一种是自动读取信息)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/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 = null
console.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实现华视身份证阅读器读取身份证信息的理解和代码内容，如果哪里写的不好或者说的不好，望各位谅解和指点。
本文也是参考了一位大佬的代码而做出的其他的补充，这位大佬代码在这，[参考的代码内容](https://blog.csdn.net/weixin_43912548/article/details/107187352)在这位这里还有华视身份证阅读器的api和接口说明文件。
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)