【vue调用身份证读卡器】

目的：vue项目接入设备读取并获取一系列信息

必要条件：

1. 安装对应的驱动程序 驱动文件地址
2. 建立长连接实时监控

在需要读取身份证信息的页面引入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);