Vue 实现华视身份证读卡器功能

在www.downcc.com下载“华视cvr100驱动”安装程序;

  • 华视电子官网有相应的文档说明和程序下载
    在这里插入图片描述
    一、服务安装

选择安装目录:
在这里插入图片描述
在这里插入图片描述

启动读卡服务:
在这里插入图片描述

在这里插入图片描述

安装成功会有如图所示:
在这里插入图片描述

注意事项:
安装开发包必须使用管理员权限,因为windows服务和读卡器设备驱动程序均需要管理员权限,否则会安装失败。
win10需要修改组策略才有管理员权限。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

二、服务的使用

打开浏览器,输入地址http://127.0.0.1:19196/mainpage,回车
在这里插入图片描述

点击openDevice:
在这里插入图片描述

点击读卡:

在这里插入图片描述

根据以上文档目录说明封装成本地接口 根据个人需要进行封装 该读卡器的页面位于安装目录下

在这里插入图片描述

  • 打开页面查看所需代码接口,根据实际应用拿取接口(连接,读卡,断开);
    在这里插入图片描述
<td><input type="button" value="连接" onclick="connect()"></td>
<td><input type="button" value="读安全模块号" onclick="readSAMID()"></td>
<td><input type="button" value="读卡" onclick="readCert()"></td>
<td><input type="button" value="断开" onclick="disconnect()"></td>

function connect(){
   
	function onSuccess(data){
   
			document.getElementById("result").value = "提示:" + data.match("\"errorMsg\" : (.*)")[1] + "\n返回值:" + data.match("\"resultFlag\" : (.*)")[1];
		}

	clearForm();
	var options=new Object();
	options.type="GET";
	options.url = "/OpenDevice";
	options.timeout=5000;
	options.onSuccess=onSuccess;
	console.log
Vue.js是一个用于构建用户界面的JavaScript框架,它本身并不是直接处理硬件设备如身份证读卡器的接口调用。要在Vue应用中调用身份证读卡器这样的硬件接口,通常需要借助浏览器的Web API(如WebUSB、WebRTC等),或者是通过一些第三方库(如jsoup、html2canvas等)配合前端插件来实现。 具体步骤如下: 1. **检测设备支持**:首先确认浏览器是否支持读取身份证读卡器功能。大部分现代浏览器并不直接支持这种功能,需要特定的插件。 2. **安装插件**:找到一个适合的身份证读卡器的Web插件,比如`vue身份证扫描`这样的库,它可能会基于HTML5的UserMedia API或类似技术。 3. **创建实例并绑定事件**:在Vue组件中,初始化读卡器插件,并监听其提供的事件,例如当有身份证数据读取完成时触发。 4. **处理数据**:当读卡器插件接收到身份证信息后,你需要处理这些数据,可以将其传递给后端API进行验证或存储。 ```javascript // Vue组件示例 <template> <div id="reader-container"> <身份证读卡器 :on-read="handleRead" /> </div> </template> <script> import IDCardReader from 'vue身份证扫描'; export default { components: { '身份证读卡器': IDCardReader, }, methods: { handleRead(idCardData) { // 发送POST请求到后端接口 this.$axios.post('/api/read-id-card', { idCardData }) .then(response => { console.log('身份证信息已发送:', response); }) .catch(error => { console.error('读卡失败:', error); }); }, }, }; </script> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值