【vue调用身份证读卡器】
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
目的:vue项目接入设备读取并获取一系列信息
必要条件:
- 安装对应的驱动程序 驱动文件地址
- 建立长连接实时监控
在需要读取身份证信息的页面引入js文件
此js文件是在安装驱动的基础上可以使用、作用就是建立长连接拿到数据
var ws = "";
var g_bConnectWS = false;
var g_splitFlag = "$*$";
var g_bClosed = false; //是否被关闭了
var g_index = 0; //当前高拍仪设备索引
var onMessageEvent
//开启webSocket
function StartWebSocket() {
var url = "ws://localhost:7896";//对应设备端口不能随意更改。设备之间的地址是不同的
if ('WebSocket' in window) {
ws = new WebSocket(url);
}
else if ('MozWebSocket' in window) {
ws = new MozWebSocket(url);
} else {
alert("浏览器版本过低身份证读卡器连接失败,请升级您的浏览器。\r\n浏览器要求:IE10+/Chrome14+/FireFox7+/Opera11+");
}
ws.onopen = function () {
g_bConnectWS = true;
sendInitMsg();//初始化
g_bClosed = false;
};
ws.onmessage = function (evt) {
if (typeof (evt.data) == "string") {
var str = evt.data;
if (str.length <= 0) {
return;
}
//读取身份证显示结果
if (str.indexOf("@I@") >= 0) {
var strs = new Array();
strs = str.split("@I@");
//alert(strs[1]);
onMessageEvent(strs[1])
return;
}
}
};
ws.onclose = function () {
g_bConnectWS = false;
alert("身份证读卡器连接已断开");
};
}
function sendWsMessage(jsonObj) {
var jsonStr = JSON.stringify(jsonObj);
try {
ws.send(jsonStr);
} catch (error) {
}
}
export function load(onMessage) {
//连接服务
StartWebSocket();
onMessageEvent = onMessage
}
export function unload() {
//alert("身份证读卡器断开连接");
if (g_bClosed) {
return;
}
clearInterval();
//反初始化
var jsonObj = { FuncName: 'UnInitCamLib' };
sendWsMessage(jsonObj);
}
//初始化
function sendInitMsg() {
var jsonObj = { FuncName: 'InitCamLib' };
sendWsMessage(jsonObj);
}
export function readidcard() {
var jsonObj = { FuncName: 'ReadIDCard' };
sendWsMessage(jsonObj);
}
定义好之后 在vue页面中引入
import { load, unload, readidcard } from “./main.js”;
meth...方法中定义
onIdCardResult(data) {
// console.info(data)
let res = JSON.parse(data);
//readidcard();
if (res.ret != 0) {
// console.log("读卡失败请重刷")
} else {
console.log(res.data);
// res.data.age = this.getAgeByIdCard(res.data.Birthday);
if (this.input != "") {
this.ruleForm.name = res.data.Name;
this.ruleForm.age = this.getAgeByIdCard(res.data.Birthday);
this.ruleForm.identity = res.data.IDCardNo;
this.enter();
}
}
},
// 在vue节点加载好的周期中调用即可
load(this.onIdCardResult);
this.in = setInterval(function() {
readidcard();
}, 1000);
GitHub 加速计划 / vu / vue
207.54 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 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)