Java身份证读卡器读卡实例 vue 身份证读卡器

转载

mob6454cc770d06 2023-09-19 10:32:47

文章标签 Java身份证读卡器读卡实例 vue.js 图像识别 ico JSON 文章分类 Java 后端开发

本文是用了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>

实现的效果图是：

Java身份证读卡器读卡实例 vue 身份证读卡器_ico

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

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>

显示的效果如图所示

Java身份证读卡器读卡实例 vue 身份证读卡器_vue.js_02

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

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

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

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：Java求原码 java源码怎么看懂

下一篇：Python中定义一个数怎么定义 python定义数字

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

Java身份证读卡器读卡实例 vue 身份证读卡器

Java身份证读卡器读卡实例 vue 身份证读卡器

51CTO博客