如何去实现Vue.js身份证读卡器阅读呢

　　//==================================================================
　　// **无缝支持新版本谷歌Chrome火狐Firefox网页浏览器，支持H5、Vue、React、Node.js、jQuery、JSP、PHP、ASP、ASPX、JS、HTML等开发语言
　　// 控件版本
　　《template》
　　《div id=“app”》
　　《table width=“800px” border=“0” cellspacing=“1” cellpadding=“2” align=“center” bgcolor=“#18bf10”》
　　《tr》
　　《td colspan=“3” align=“center” height=“60px;” class=“tfonts”》
　　东信EST-100GS身份证读卡器系列产品谷歌Chrome、火狐Firefox测试页面V4.2.3
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》姓名：《/td》
　　《td width=“100px”》
　　《input type=“text” name=“text_name” id=“text_name” v-model=“text_name” readonly 》
　　《/td》
　　《td rowspan=“5” align=“center”》
　　《img id=“PhotoID” name=“Photo” style=“width:102px; height:126px;” ：src=“PhotoId”/》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》性别：《/td》
　　《td》
　　《input type=“text” name=“text_sex” id=“text_sex” v-model=“text_sex” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》民族：《/td》
　　《td》
　　《input type=“text” name=“text_nation” id=“text_nation” v-model=“text_nation” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》出生：《/td》
　　《td》
　　《input type=“text” name=“text_birthday” id=“text_birthday” v-model=“text_birthday” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》住址：《/td》
　　《td 》
　　《input type=“text” name=“text_address” id=“text_address” v-model=“text_address” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》身份证号码：《/td》
　　《td》
　　《input type=“text” name=“text_idNum” id=“text_idNum” v-model=“text_idNum” readonly 》
　　《/td》
　　《td rowspan=“5” align=“center”》
　　《img id=“PhotoIDFront” name=“Photo” style=“width:200px;height:126px;” ：src=“PhotoIDFront”/》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》签发机关：《/td》
　　《td》
　　《input type=“text” name=“text_dept” id=“text_dept” v-model=“text_dept” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》有效期开始：《/td》
　　《td》
　　《input type=“text” name=“text_effDate” id=“text_effDate” v-model=“text_effDate” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》有效期结束：《/td》
　　《td》
　　《input type=“text” name=“text_expDate” id=“text_expDate” v-model=“text_expDate” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》身份证物理ID：《/td》
　　《td》
　　《input type=“text” name=“text_ID” id=“text_ID” v-model=“text_ID” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》IC卡卡号：《/td》
　　《td》
　　《input type=“text” name=“text_IC_ID” id=“text_IC_ID” v-model=“text_IC_ID” readonly 》
　　《/td》
　　《td rowspan=“5” align=“center”》
　　《img id=“PhotoIDBack” name=“Photo” style=“width:200px;height:126px;” ：src=“PhotoIDBack”/》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》银行卡号：《/td》
　　《td》
　　《input type=“text” name=“text_Bank_ID” id=“text_Bank_ID” v-model=“text_Bank_ID” 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》社保卡姓名：《/td》
　　《td》
　　《input type=“text” name=“S_text_name” id=“S_text_name” v-model=“S_text_name” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》社保卡性别：《/td》
　　《td》
　　《input type=“text” name=“S_text_sex” id=“S_text_sex” v-model=“S_text_sex” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》社保卡名族：《/td》
　　《td》
　　《input type=“text” name=“S_text_nation” id=“S_text_nation” v-model=“S_text_nation” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》社保卡出生日期：《/td》
　　《td colspan=“2”》
　　《input type=“text” name=“S_text_birthday” id=“S_text_birthday” v-model=“S_text_birthday” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》社保卡身份证号码：《/td》
　　《td colspan=“2”》
　　《input type=“text” name=“S_text_idNum” id=“S_text_idNum” v-model=“S_text_idNum” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》发卡日期：《/td》
　　《td colspan=“2”》
　　《input type=“text” name=“S_text_effDate” id=“S_text_effDate” v-model=“S_text_effDate” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》卡有效期：《/td》
　　《td colspan=“2”》
　　《input type=“text” name=“S_text_expDate” id=“S_text_expDate” v-model=“S_text_expDate” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》社保卡卡号：《/td》
　　《td colspan=“2”》
　　《input type=“text” name=“S_text_kahao” id=“S_text_kahao” v-model=“S_text_kahao” readonly 》
　　《/td》
　　《/tr》
　　《tr》
　　《td class=“title”》返回数据：《/td》
　　《td colspan=“2”》
　　《textarea v-model=“text_result” rows=“6”
　　style=“color：#FF0000;width:94.3%;”
　　cols=“40”
　　readonly》
　　《/textarea》
　　《/td》
　　《/tr》
　　《tr》
　　《td colspan=“3” align=“center” height=“50px;”》
　　《input class=“butt” type=“button” name=“clearImage” value=“清除信息” @click=“clearinput”》
　　《input class=“butt” type=“button” name=“readIDCard” value=“读身份证” @click=“readIDCard”》
　　《input class=“butt” type=“button” name=“autoReadIDCard” value=“自动读卡” @click=“autoReadIDCard”》
　　《input class=“butt” type=“button” name=“stopAutoReadIDCard” value=“停止读卡” @click=“stopAutoReadIDCard”》
　　《input class=“butt” type=“button” name=“readM1Card” value=“读IC卡卡号” @click=“readM1Card”》
　　《input class=“butt” type=“button” name=“readBankCard” value=“读银行卡卡号” @click=“readBankCard”》
　　《input class=“butt” type=“button” name=“readSocialCard” value=“读社保卡” @click=“readSocialCard”》
　　《！--《input class=“butt” type=“button” name=“cardOperate” value=“IC卡操作” @click=“cardOperate”》--》
　　《！--《input Class=“butt” type=“button” name=“IDRequest” value=“检测身份证卡片” @click=“IDRequest”》--》
　　《！--《input class=“butt” type=“button” name=“closeSocket” value=“关闭设备” @click=“closeSocket”》--》
　　《/td》
　　《/tr》
　　《/table》
　　《/div》
　　《/template》
　　《script type=“text/javascript”》
　　//支持身份证读卡器型号EST-100GS
　　// http://www.eastoms.com
　　export default {
　　name： ‘ReadIdCard’，
　　data（）{
　　return {
　　socket:null，
　　host：“ws://127.0.0.1:33666”，
　　text_name ：“”，
　　text_sex ：“”，
　　text_nation ：“”，
　　text_birthday ：“”，
　　text_address ：“”，
　　text_idNum ：“”，
　　text_dept ：“”，
　　text_effDate ：“”，
　　text_expDate ：“”，
　　text_ID ：“”，
　　text_IC_ID ：“”，
　　text_Bank_ID ：“”，
　　S_text_name ：“”，
　　S_text_sex ：“”，
　　S_text_nation ：“”，
　　S_text_birthday ：“”，
　　S_text_idNum ：“”，
　　S_text_effDate ：“”，
　　S_text_expDate ：“”，
　　S_text_kahao ：“”，
　　text_result ：“”，
　　}
　　}，
　　created： function （） {
　　// 默认页面打开，就自动打开设备
　　this.openReader（）;
　　}，
　　methods：{
　　//提示信息
　　resultMsg（msg） {
　　if（msg ！= “” && msg ！= undefined） this.text_result += “rn” + msg;
　　}，
　　// 打开socket连接
　　openReader（） {
　　var host = “ws://127.0.0.1:33666”; //客户端电脑本地IP，非服务器IP，无需修改
　　if（this.socket == null）{
　　this.socket = new WebSocket（host）;
　　}else{
　　this.resultMsg（“已初始化。”）;
　　}
　　try {
　　var _this = this;
　　this.socket.onopen = function （） {
　　_this.resultMsg（“初始化成功。”）; //可以注释
　　_this.$options.methods.getVersion（）; //可以注释：控件版本号
　　_this.$options.methods.readSAMID（）; //可以注释：读卡器芯片号，全球唯一，通常可用来授权管理
　　//autoReadIDCard（）; //自动读卡可以放这里，自动读卡放身份证的间隔要》300ms，否则会不读卡
　　};
　　this.socket.onclose = function （） {
　　_this.resultMsg（“读卡服务已经断开。”）;
　　};
　　this.socket.onerror = function（）{
　　_this.resultMsg（“请检查控件是否正常安装。”）;
　　};
　　this.socket.onmessage = function （msg） {
　　if （typeof msg.data == “string”） {
　　var msgM=msg.data+“”;
　　var msgJson = JSON.parse（msgM）;
　　switch（msgJson.fun） {
　　case “EST_GetVersion#”： // 获取版本号
　　_this.resultMsg（“版本号：”+msgJson.errMsg）;
　　break;
　　case “EST_Reader_ReadIDCard#”： //单词 -》 读卡
　　if （msgJson.rCode == “0”） {
　　_this.text_name = msgJson.name; //姓名
　　_this.text_sex = msgJson.sex; //性别
　　_this.text_nation = msgJson.nation; //民族
　　_this.text_birthday = msgJson.birth; //出生日期
　　_this.text_address = msgJson.address; //住址
　　_this.text_idNum = msgJson.certNo; //身份证号码
　　_this.text_dept = msgJson.department; //签发机关
　　_this.text_effDate = msgJson.effectData; //有效期开始
　　_this.text_expDate = msgJson.expire; //有效期结束
　　_this.PhotoId = “data:image/jpeg;base64，”+msgJson.base64Data; //身份证头像，base64格式数据，实际尺寸：102x126px
　　_this.PhotoIDFront = “data:image/jpeg;base64，”+msgJson.imageFront; //身份证正面照片，实际尺寸：540x340px，如无需使用，建议注释掉
　　_this.PhotoIDBack = “data:image/jpeg;base64，”+msgJson.imageBack; //身份证反面照片，实际尺寸：540x340px，如无需使用，建议注释掉
　　ReadCertID（）; //身份证物理ID，如无需使用，建议注释掉
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　else if（msgJson.rCode == “1”）{
　　_this.resultMsg（“已停止自动读卡”）;
　　}
　　else if（msgJson.rCode == “-2”）{
　　_this.resultMsg（“请放身份证”）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_GetCertFrontImage#”： //身份证正面照片，base64格式数据
　　if （msgJson.rCode == “0”） {
　　_this.PhotoIDFront = “data:image/jpeg;base64，”+msgJson.imageFront;
　　}
　　break;
　　case “EST_GetCertBackImage#”： //身份证反面照片，base64格式数据
　　if （msgJson.rCode == “0”） {
　　_this.PhotoIDBack = “data:image/jpeg;base64，”+msgJson.imageBack;
　　}
　　break;
　　case “EST_ReadCertID#”： //身份证物理ID
　　if （msgJson.rCode == “0”） {
　　_this.text_ID = msgJson.UID;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_ReadBankCard#”： //银行卡卡号
　　if （msgJson.rCode == “0”） {
　　_this.text_Bank_ID = msgJson.bankCard;
　　_this.$options.methods.posBeep（）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_ReadM1Card#”： //IC卡卡号
　　if （msgJson.rCode == “0”） {
　　_this.text_IC_ID = msgJson.UID;
　　_this.$options.methods.posBeep（）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_ReadSocialCard#”： //社保卡信息，个别地区社保卡不按国家规范来的，会读取信息不全
　　if （msgJson.rCode == “0”） {
　　_this.$options.methods.posBeep（）;
　　_this.S_text_name = msgJson.XM; //社保卡姓名
　　_this.S_text_sex = msgJson.XB; //社保卡性别
　　_this.S_text_nation = msgJson.MZ; //社保卡民族
　　_this.S_text_birthday = msgJson.CSRQ; //社保卡出生日期
　　_this.S_text_idNum = msgJson.SHBZHM; //社保卡身份证号
　　_this.S_text_effDate = msgJson.FKRQ; //社保卡有效期开始
　　_this.S_text_expDate = msgJson.KYXQ; //社保卡有效期结束
　　_this.S_text_kahao = msgJson.SBKH; //社保卡卡号
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_IDRequest#”：
　　if （msgJson.rCode == “0”） {
　　_this.resultMsg（“找到身份证”）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_FindCardM1#”：
　　if （msgJson.rCode == “0”） {
　　_this.resultMsg（“寻卡成功，M1卡UID：” + msgJson.Uid）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_VerifyKeyM1#”：
　　if （msgJson.rCode == “0”） {
　　_this.resultMsg（“秘钥认证成功”）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_ReadCardM1#”：
　　if （msgJson.rCode == “0”） {
　　_this.resultMsg（“读卡成功，数据为：” + msgJson.readData）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_WriteCardM1#”：
　　if （msgJson.rCode == “0”） {
　　_this.resultMsg（“写卡成功”）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_PowerOnCpu#”： //非接CPU卡上电信息
　　if （msgJson.rCode == “0”） {
　　_this.resultMsg（“复位信息：” + msgJson.ATR）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_WriteCpu#”： //非接CPU卡APDU指令响应信息
　　if （msgJson.rCode == “0”） {
　　_this.resultMsg（“响应数据：” + msgJson.Resp）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　case “EST_ReaderGertSAMID#”： //获得读卡器芯片系列号，读卡器授权可以放这里来判断
　　if （msgJson.rCode == “0”） {
　　_this.resultMsg（“系列号：” + msgJson.SAMID）;
　　}
　　else {
　　_this.resultMsg（msgJson.errMsg）;
　　}
　　break;
　　default：
　　break;
　　}
　　}
　　else{
　　alert（“连接异常，请检查是否成功安装控件。”）;
　　}
　　};
　　}
　　catch （ex） {
　　alert（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　// 清空文本框信息
　　clearinput（）
　　{
　　this.text_ID = “”;
　　this.text_IC_ID = “”;
　　this.text_Bank_ID = “”;
　　this.text_name = “”;
　　this.text_sex = “”;
　　this.text_nation = “”;
　　this.text_birthday = “”;
　　this.text_address = “”;
　　this.text_idNum = “”;
　　this.text_dept = “”;
　　this.text_effDate = “”;
　　this.text_expDate = “”;
　　this.text_result = “”;
　　this.PhotoId = “”;
　　this.S_text_name = “”;
　　this.S_text_sex = “”;
　　this.S_text_nation = “”;
　　this.S_text_birthday = “”;
　　this.S_text_idNum = “”;
　　this.S_text_effDate = “”;
　　this.S_text_expDate = “”;
　　this.S_text_kahao = “”;
　　this.PhotoIDBack = “”;
　　this.PhotoIDFront = “”;
　　}，
　　//控件版本号
　　getVersion（） {
　　this.socket.send（“EST_GetVersion#”）;
　　}，
　　//蜂鸣器控制，可以自己选择是否蜂鸣
　　posBeep（） {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_PosBeep#”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}，
　　// 单次读取身份证信息
　　readIDCard（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_Reader_ReadIDCard#”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　//自动读取身份证信息
　　autoReadIDCard（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_Reader_ReadIDCard#|1”）;
　　//resultMsg（“自动读卡，请放身份证。..”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　//停止连续读取身份证信息
　　stopAutoReadIDCard（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_StopReadIDCard#”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　// 读取身份证正反面照片
　　readIDCardImage（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_GetCertFrontImage#”）;
　　this.socket.send（“EST_GetCertBackImage#”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　//读取身份证物理ID，16位16进制数据，一般情况用不到，可以注释掉
　　ReadCertID（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_ReadCertID#”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　//读取IC卡号，包括M1、CPU卡，8位16进制数据
　　readM1Card（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_ReadM1Card#”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　//读取银行卡号，支持QUICK PASS闪付银行卡，大部分卡支持，少部分地方性银行会读取失败
　　readBankCard（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_ReadBankCard#”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　//读社保卡，支持二代芯片社保卡，三代卡无秘钥不能读取
　　readSocialCard（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_ReadSocialCard#”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　//检测是否有身份证存在
　　IDRequest（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_IDRequest#”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　//IC卡读写操作函数，包括M1卡读写、CPU卡读写等功能，详细指令见开发文档中3.2.11 IC卡操作函数部分
　　cardOperate（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（this.S_text_kacaozuo）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　//获得读卡器芯片系列号，全球唯一，通常可用来授权管理
　　readSAMID（） {
　　try {
　　if （this.socket.readyState == 1） {
　　this.socket.send（“EST_ReaderGertSAMID#”）;
　　}
　　else {
　　this.resultMsg（“未找到控件，请检查控件是否安装。”）;
　　}
　　}
　　catch （ex） {
　　this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
　　}
　　}，
　　//关闭soket
　　closeSocket（） {
　　try {
　　if（this.socket ！= undefined）{
　　this.socket.close（）;
　　this.socket = undefined;
　　}
　　}
　　catch （ex） {
　　}
　　}，
　　}
　　}
　　《/script》
　　《style》
　　body {background-color：#eeeeee;}
　　td {background-color：#FFFFFF;}
　　input {width:430px;}
　　.butt {width:110px; height:25px;}
　　.title {padding-left:10px; width:130px;}
　　table {font-size:12px;}
　　table .tfonts{font-size:22px;}
　　《/style》