GitBucket
4.23.0
Toggle navigation
Sign in
Files
Branches
1
Releases
Issues
Pull requests
Labels
Priorities
Milestones
Wiki
Forks
hanfei
/
VueSharedPrinting
Browse code
han
master
1 parent
281c2ad
commit
49a71ec9f402d1152456c4a32d3f67efac53ff0f
hanfei
authored
on 30 Jan 2024
Patch
Showing
1 changed file
src/views/selectFile.vue
Ignore Space
Show notes
View
src/views/selectFile.vue
<template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div class="box flex-center" v-if="name == 'U盘打印'"> <div class="tip" style="width: 20rem;"> <div class="title">温馨提示</div> <div class="content">请在右侧文件浏览区，找到待印资料文件存放的目录(文件夹)，然后点选您需要打印的文件，之后按下“确认资料”按钮来提交资料。</div> </div> <div class="file"> <div class="main" style="width: 50rem;"> <div v-for="(item, index) in usbList" v-bind:key="index" class="li flex-start" @click="onChange(index, 'usbList',!item.sta)"> <input type="checkbox" v-model="item.sta"> <div class="name flex-start">{{ item.name }}</div> </div> </div> <div class="flex-between but"> <div class="btn flex-center" @click="skip('argument', name)">确认资料</div> </div> </div> </div> <!-- 扫描打印--> <div class="box flex-center" v-if="name == '扫描打印'"> <div class="file2"> <div class="title flex-between">已完成扫描的版面 <span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span></div> <div class="main flex-between"> <div class="smfyData"> <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')"> <div class="name">{{ index + 1 }}</div> <span @click="onCancel(index, 'imgList')">删除</span> </div> </div> <img v-show="smfyIndex!=-1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" /> <img v-show="smfyIndex==-1" id="myCanvas" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content">每次扫描前，可以按“预览”按钮来实时查看版面效果。已经扫描好的 页面显示在左边的列表中，您可以点击列表中的缩略图进行浏览核对， 不满意的页面可以点旁边的“删除”进行移除并重新扫描。如果有文件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描工作。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">{{ imgList.length>0?'继续扫描':'开始扫描' }}</div> <div class="btn flex-center" @click="skip('argument', name)">完成扫描</div> </div> </div> </div> <!-- 身份证打印--> <div class="box flex-center" v-if="name == '身份证打印'"> <div class="file2 file3" style="margin-right: 20rem"> <div class="title">请核对您的信息</div> <div class="card" ref="captureArea" v-if="cardInfo!=''"> <div class="card-box2"> <img src="../assets/card2.png" alt="身份证正面" /> <div class="diamond"> <div class="name">{{ cardInfo.name }}</div> <div class="gender flex-start">{{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div></div> <div class="birth flex-start"> <span>{{ cardInfo.birthday | joinYear }}</span> <div>{{ cardInfo.birthday | joinMonth }}</div> <div>{{ cardInfo.birthday | joinDay }}</div> </div> <div class="addr">{{ cardInfo.address }}</div> <div class="idNum">{{ cardInfo.idNum }}</div> <div class="avatar"><img :src="photo" alt=""></div> </div> </div> <div class="card-box2"> <img src="../assets/card1.png" alt="身份证反面" /> <div class="diamond diamond2"> <div class="sign">{{ cardInfo.issueOrg }}</div> <div class="date">{{ cardInfo.effectDate | joinRq}}-{{ cardInfo.expireDate | joinRq}}</div> </div> </div> </div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div> <div class="btn flex-center" @click="skip('argument', name)">信息无误，继续</div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import html2canvas from "html2canvas"; import {upload2Pdf, changeIdPhotoBgc, image2Pdf} from '@/api/resultApi' import {readUsb, readFile, readCard} from '@/api/bdResultApi' import parseCardWzxx from "../utils/mz"; export default { name: 'selectFile', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, filters: { joinYear(val) { return val.substring(0, 4) }, joinMonth(val) { if(val.substring(4, 5)==0) { return val.substring(5, 6) } return val.substring(4, 6) }, joinDay(val) { if(val.substring(6, 7)==0) { return val.substring(7, 8) } return val.substring(6, 8) }, joinRq(val) { return val.substring(0, 4)+'.'+val.substring(4, 6)+'.'+val.substring(6, 8) } }, data() { return { isChecked: true, tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交', name: this.cite.modeName, path: this.cite.inWebURL, socket: '', imgList: [], smfyIndex: -1, photo: '', UpFile: [], cardInfo: '', usbList: [], usbTime: '' }; }, methods: { async uploadImg(data, sta) { let _this = this for (let i = 0; i < data.length; i++) { let formData = new FormData() let file = data[i] if (sta) { // let dataURL = file.toDataURL('image/png') let name = i + '.png' file = _this.dataURLtoFile(file, name) } formData.append('file', file) // 使用数组语法添加多个文件 if(this.cite.modeName=='身份证打印') { let res = await image2Pdf(formData) _this.cite.selectedFile.push(res) // console.log('打印文件', this.cite.selectedFile, res) }else{ let res = await upload2Pdf(formData) _this.cite.selectedFile.push(res) // console.log('打印文件', this.cite.selectedFile, res) } } }, async skip(href, name) { if (this.usbList.length > 0) { // 保存选中的U盘文件 // await this.uploadImg(this.UpFile, false) await this.dealFile() } else if (this.imgList.length > 0) { // 保存高拍仪图片 await this.uploadImg(this.imgList, true) } else if (this.cardInfo) { // 保存身份证图片 await this.captureAndDownload() } else { this.cite.state = { name: '请选择文件打印！', sta: true } return } this.$router.push({ name: href, params: { name: name } }) }, async captureAndDownload() { const captureArea = this.$refs.captureArea // 使用 html2canvas 将区域内容生成为图片 console.log('html2canvas',window.devicePixelRatio) let sca = 0.8 if(window.devicePixelRatio>=1) { sca = 0.7 } const canvas = await html2canvas(captureArea, {scale: sca}) // 将 canvas 转为图片 URL const dataURL = canvas.toDataURL('image/png') const name = 'sfz.png' const file = this.dataURLtoFile(dataURL, name) this.uploadImg([file], false) }, dataURLtoFile(dataURL, filename) { const arr = dataURL.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, {type: mime}) }, onChange(index, name, sta) { if (name == 'usbList') { this[name][index].sta = sta } else { this[name] = index } }, onCancel(index, name) { if (name == 'imgList') { this.smfyIndex = -1 } this[name].splice(index, 1) }, paiz() { this.socket.send('Capture@2') }, init: function () { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket') } else { // 实例化socket this.socket = new WebSocket(this.path) // 监听socket连接 this.socket.onopen = this.open // 监听socket错误信息 this.socket.onerror = this.error // 监听socket消息 this.socket.onmessage = this.getMessage } }, open: function () { // console.log("socket连接成功") this.socket.send('OpenIdCardEx@0') this.socket.send('OpenDevice@1') this.socket.send('SetResolution@2@2592@1944') this.socket.send('OpenVideo') this.socket.send('RotateRight') this.socket.send('Deskew') }, error: function () { console.log('连接错误') }, getMessage: function (msg) { if (typeof msg.data == 'string') { if (msg.data.indexOf('GetDevCount') == 0) { let s = msg.data.substring(12) if ('1' == s || '2' == s) { //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备 alert('检测到已经连接上摄像头') } } else if (msg.data.indexOf('Capture') == 0) { let s = msg.data.substring(8) if (s) { this.imgList.push('data:image/jpeg;base64,' + s) } } else if (msg.data.indexOf('MoveDetectEvent') == 0) { this.socket.send('Capture@2') } else if (msg.data.indexOf('IdCardEvent') == 0) { this.socket.send('UnFaceDetect') } else if (msg.data.indexOf('ReadIdCard') == 0) { let s = msg.data.substring(11) if ('1' == s) { this.socket.send('GetIdCardResult@||') this.socket.send('GetIdCardImage@2') } } else if (msg.data.indexOf('GetIdCardResult') == 0) { let s = msg.data.substring(16) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetBarcode') == 0) { // alert(msg.data); let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetIdCardImage') == 0) { let s = msg.data.substring(15) let arr = s.split('#') let faceImg = arr[0] let myimg = document.getElementById('myCanvas3') myimg.src = 'data:image/jpeg;base64,' + faceImg } else if (msg.data.indexOf('GetBase64') == 0) { let s = msg.data.substring(10) let myimg = document.getElementById('myCanvas2') myimg.src = 'data:image/jpeg;base64,' + s alert(s) } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) { let s = msg.data.substring(27) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetOcrFromFileName') == 0) { let s = msg.data.substring(19) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetDogSN') == 0) { let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } } else { let reader = new FileReader() reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { let url = msg.target.result; document.getElementById('myCanvas').src = url; } } reader.readAsDataURL(msg.data) } }, close: function () { // console.log("socket已经关闭") this.socket.close() this.socket = '' }, handleFileChange(event) { let file = event.target.files[0] if (file) { this.UpFile.push(file) } }, sfzCard2() { let _this = this let res = { errorMsg: 'OK', resultContent: { "address": "江西省赣州市寻乌县长宁镇镇山路14号402室", "birthday": "19960515", "effectDate": "20231010", "expireDate": "20431010", "gender": "1", "idNum": "360734199605150074", "issueOrg": "寻乌县公安局", "name": "韩菲", "nation": "01", "photo": "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" } } if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } }, // 获取身份证信息 async sfzCard() { let _this = this let res = await readCard() if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } else { if(this.$route.name == 'selectFile') { setTimeout(() => { this.sfzCard() }, 1000) } } }, // 图片处理 imgDeals(re) { let file = this.dataURLtoFile('data:image/png;base64,' + re, 'sfzTx.png') let formData = new FormData() formData.append('file', file) formData.append('colorEnum', 'CLEAR') changeIdPhotoBgc(formData).then((res) => { console.log(res) this.photo = res.previewPath }) }, // 读取U盘 readUsb() { let data = { extensions: 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,png' } readUsb(data).then((res) => { // console.log(res) if (res) { if(this.UpFile.length != res.length) { // console.log(this.UpFile , res) this.UpFile = res this.usbList = [] res.forEach(re =>{ this.usbList.push({ name: re, sta: false }) }) } } else { this.UpFile = [] this.usbList = [] this.cite.state = { name: '请插入U盘', sta: true } } if(this.$route.name == 'selectFile') { setTimeout(() =>{ this.readUsb() },1000) } }) }, // 处理选中文件 async dealFile() { let {usbList} = this await usbList.forEach(re =>{ if(re.sta) { this.readFile(re.name) } }) }, async readFile(url) { let res = await readFile({filePath: url}) console.log(res) this.cite.selectedFile.push(res.data) }, }, destroyed() { // 销毁监听 if(this.socket) { this.close() } }, mounted() { this.cite.selectedFile = [] if (this.cite.modeName == "扫描打印") { this.init(); }else if(this.cite.modeName == "身份证打印") { this.sfzCard() }else if(this.cite.modeName == "U盘打印") { this.readUsb() } } } </script> <style scoped lang="less"> @font-face { font-family: 'STHeiti';//自定义字体名字 src: url('../assets/typeface/STHeiti.ttf') format('truetype');//定义好文件的相对地址 } @font-face { font-family: 'OCR';//自定义字体名字 src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype');//定义好文件的相对地址 } .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 9.69rem; .main { width: 31.63rem; height: 26.56rem; background: #ffffff; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; padding: 1rem 0; overflow-y: scroll; .li { padding-left: 1rem; .name { min-height: 1.8rem; text-align: left; max-width: 80%; margin-left: 1rem; } img { width: 1.3rem; margin-left: 1rem; } } } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; position: relative; input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; } } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; //text-align: left; span { text-decoration: underline; font-size: 1.5rem; font-weight: bold; color: #323232; line-height: 2rem; } .act { color: #52a39d; } } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { //width: 42.81rem; width: 20rem; margin: 0 10rem; height: 35.31rem; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box { width: 25rem; height: 15rem; margin-right: 5rem; position: relative; font-weight: 500; font-size: .9rem; line-height: 1rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.6rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.5rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; .month { margin-left: 1.7rem; } .day { margin-left: 1.2rem; } } .card-addr { width: 11rem; position: absolute; top: 8.1rem; left: 4.5rem; text-align: left; line-height: 1.3rem; } .card-id { position: absolute; bottom: .8rem; left: 8rem; letter-spacing: .2rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } .card-box2 { position: relative; font-family: 'OCR'; margin: 0 auto; img { width: 100%; } .diamond { position: absolute; top: 0; //left: 60px; right: 0; height: 100%; //font-size: 12px; text-align: left; left: 3.75rem; font-size: 0.75rem; .name { //font-size: 14px; font-family: 'STHeiti'; //margin: 23px 0 10px; font-size: 0.875rem; margin: 1.4375rem 0 0.625rem; } .gender { div { //margin-left: 50px; margin-left: 3.125rem; } } .birth { //margin: 12px 0; margin: 0.9rem 0 .8rem; font-size: .85rem; span { //margin-right: 3px; margin-right: 0.1875rem; } div { //width: 20px; //margin-left: 9px; text-align: center; width: 1.25rem; margin-left: 0.5625rem; } } .addr { //width: 140px; //line-height: 18px; width: 8.75rem; line-height: 1.125rem; } .idNum { position: absolute; font-family: 'STHeiti'; font-weight: 500; left: 2.875rem; font-size: 1rem; letter-spacing: 0.0625rem; bottom: 1.5rem; } .avatar { position: absolute; //right: 20px; //width: 96px; //top: 30px; right: 1.25rem; width: 6rem; top: 1.875rem; } } .diamond2 { //left: 130px; height: auto; top: auto; //bottom: 20px; left: 8.125rem; bottom: 1.25rem; font-size: .8rem; font-family: 'STHeiti'; .sign { //margin-bottom: 14px; margin-bottom: 0.875rem; } } } } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52a39d; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } </style>
<template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div class="box flex-center" v-if="name == 'U盘打印'"> <div class="tip" style="width: 20rem;"> <div class="title">温馨提示</div> <div class="content">请在右侧文件浏览区，找到待印资料文件存放的目录(文件夹)，然后点选您需要打印的文件，之后按下“确认资料”按钮来提交资料。</div> </div> <div class="file"> <div class="main" style="width: 50rem;"> <div v-for="(item, index) in usbList" v-bind:key="index" class="li flex-start" @click="onChange(index, 'usbList',!item.sta)"> <input type="checkbox" v-model="item.sta"> <div class="name flex-start">{{ item.name }}</div> </div> </div> <div class="flex-between but"> <div class="btn flex-center" @click="skip('argument', name)">确认资料</div> </div> </div> </div> <!-- 扫描打印--> <div class="box flex-center" v-if="name == '扫描打印'"> <div class="file2"> <div class="title flex-between">已完成扫描的版面 <span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span></div> <div class="main flex-between"> <div class="smfyData"> <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')"> <div class="name">{{ index + 1 }}</div> <span @click="onCancel(index, 'imgList')">删除</span> </div> </div> <img v-show="smfyIndex!=-1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" /> <img v-show="smfyIndex==-1" id="myCanvas" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content">每次扫描前，可以按“预览”按钮来实时查看版面效果。已经扫描好的 页面显示在左边的列表中，您可以点击列表中的缩略图进行浏览核对， 不满意的页面可以点旁边的“删除”进行移除并重新扫描。如果有文件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描工作。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">{{ imgList.length>0?'继续扫描':'开始扫描' }}</div> <div class="btn flex-center" @click="skip('argument', name)">完成扫描</div> </div> </div> </div> <!-- 身份证打印--> <div class="box flex-center" v-if="name == '身份证打印'"> <div class="file2 file3" style="margin-right: 20rem"> <div class="title">请核对您的信息</div> <div class="card" ref="captureArea" v-if="cardInfo!=''"> <div class="card-box2"> <img src="../assets/card2.png" alt="身份证正面" /> <div class="diamond"> <div class="name">{{ cardInfo.name }}</div> <div class="gender flex-start">{{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div></div> <div class="birth flex-start"> <span>{{ cardInfo.birthday | joinYear }}</span> <div>{{ cardInfo.birthday | joinMonth }}</div> <div>{{ cardInfo.birthday | joinDay }}</div> </div> <div class="addr">{{ cardInfo.address }}</div> <div class="idNum">{{ cardInfo.idNum }}</div> <div class="avatar"><img :src="photo" alt=""></div> </div> </div> <div class="card-box2"> <img src="../assets/card1.png" alt="身份证反面" /> <div class="diamond diamond2"> <div class="sign">{{ cardInfo.issueOrg }}</div> <div class="date">{{ cardInfo.effectDate | joinRq}} - {{ cardInfo.expireDate | joinRq}}</div> </div> </div> <div class="card-box" v-show="false"> <img src="../assets/card2.png" alt="身份证反面" /> <div class="card-name">{{ cardInfo.name }}</div> <div class="card-gender"> {{ cardInfo.xbmc }}<span>{{ cardInfo.mzmc }}</span> </div> <div class="card-birth"> {{ cardInfo.birthday | joinYear }} <span class="month">{{ cardInfo.birthday | joinMonth }}</span> <span class="day">{{ cardInfo.birthday | joinDay }}</span> </div> <div class="card-addr"> {{ cardInfo.address }} </div> <div class="card-id">{{ cardInfo.idNum }}</div> <div class="card-avatar"> <!-- <img :src="'data:image/png;base64,'+cardInfo.photo" alt="" />--> <img :src="photo" alt=""> </div> </div> <div class="card-box" v-show="false"> <img src="../assets/card1.png"/> <div class="card-sign">{{ cardInfo.issueOrg }}</div> <div class="card-date"> {{ cardInfo.effectDate | joinRq}} - {{ cardInfo.expireDate | joinRq}} </div> </div> </div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div> <div class="btn flex-center" @click="skip('argument', name)">信息无误，继续</div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import html2canvas from "html2canvas"; import {upload2Pdf, changeIdPhotoBgc, image2Pdf} from '@/api/resultApi' import {readUsb, readFile, readCard} from '@/api/bdResultApi' import parseCardWzxx from "../utils/mz"; export default { name: 'selectFile', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, filters: { joinYear(val) { return val.substring(0, 4) }, joinMonth(val) { if(val.substring(4, 5)==0) { return val.substring(5, 6) } return val.substring(4, 6) }, joinDay(val) { if(val.substring(6, 7)==0) { return val.substring(7, 8) } return val.substring(6, 8) }, joinRq(val) { return val.substring(0, 4)+'.'+val.substring(4, 6)+'.'+val.substring(6, 8) } }, data() { return { isChecked: true, tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交', name: this.cite.modeName, path: this.cite.inWebURL, socket: '', imgList: [], smfyIndex: -1, photo: '', UpFile: [], cardInfo: '', usbList: [], usbTime: '' }; }, methods: { async uploadImg(data, sta) { let _this = this for (let i = 0; i < data.length; i++) { let formData = new FormData() let file = data[i] if (sta) { // let dataURL = file.toDataURL('image/png') let name = i + '.png' file = _this.dataURLtoFile(file, name) } formData.append('file', file) // 使用数组语法添加多个文件 if(this.cite.modeName=='身份证打印') { let res = await image2Pdf(formData) _this.cite.selectedFile.push(res) // console.log('打印文件', this.cite.selectedFile, res) }else{ let res = await upload2Pdf(formData) _this.cite.selectedFile.push(res) // console.log('打印文件', this.cite.selectedFile, res) } } }, async skip(href, name) { if (this.usbList.length > 0) { // 保存选中的U盘文件 // await this.uploadImg(this.UpFile, false) await this.dealFile() } else if (this.imgList.length > 0) { // 保存高拍仪图片 await this.uploadImg(this.imgList, true) } else if (this.cardInfo) { // 保存身份证图片 await this.captureAndDownload() } else { this.cite.state = { name: '请选择文件打印！', sta: true } return } this.$router.push({ name: href, params: { name: name } }) }, async captureAndDownload() { const captureArea = this.$refs.captureArea // 使用 html2canvas 将区域内容生成为图片 console.log('html2canvas',window.devicePixelRatio) let sca = 0.8 if(window.devicePixelRatio>=1) { sca = 0.7 } const canvas = await html2canvas(captureArea, {scale: sca}) // 将 canvas 转为图片 URL const dataURL = canvas.toDataURL('image/png') const name = 'sfz.png' const file = this.dataURLtoFile(dataURL, name) this.uploadImg([file], false) }, dataURLtoFile(dataURL, filename) { const arr = dataURL.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, {type: mime}) }, onChange(index, name, sta) { if (name == 'usbList') { this[name][index].sta = sta } else { this[name] = index } }, onCancel(index, name) { if (name == 'imgList') { this.smfyIndex = -1 } this[name].splice(index, 1) }, paiz() { this.socket.send('Capture@2') }, init: function () { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket') } else { // 实例化socket this.socket = new WebSocket(this.path) // 监听socket连接 this.socket.onopen = this.open // 监听socket错误信息 this.socket.onerror = this.error // 监听socket消息 this.socket.onmessage = this.getMessage } }, open: function () { // console.log("socket连接成功") this.socket.send('OpenIdCardEx@0') this.socket.send('OpenDevice@1') this.socket.send('SetResolution@2@2592@1944') this.socket.send('OpenVideo') this.socket.send('RotateRight') this.socket.send('Deskew') }, error: function () { console.log('连接错误') }, getMessage: function (msg) { if (typeof msg.data == 'string') { if (msg.data.indexOf('GetDevCount') == 0) { let s = msg.data.substring(12) if ('1' == s || '2' == s) { //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备 alert('检测到已经连接上摄像头') } } else if (msg.data.indexOf('Capture') == 0) { let s = msg.data.substring(8) if (s) { this.imgList.push('data:image/jpeg;base64,' + s) } } else if (msg.data.indexOf('MoveDetectEvent') == 0) { this.socket.send('Capture@2') } else if (msg.data.indexOf('IdCardEvent') == 0) { this.socket.send('UnFaceDetect') } else if (msg.data.indexOf('ReadIdCard') == 0) { let s = msg.data.substring(11) if ('1' == s) { this.socket.send('GetIdCardResult@||') this.socket.send('GetIdCardImage@2') } } else if (msg.data.indexOf('GetIdCardResult') == 0) { let s = msg.data.substring(16) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetBarcode') == 0) { // alert(msg.data); let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetIdCardImage') == 0) { let s = msg.data.substring(15) let arr = s.split('#') let faceImg = arr[0] let myimg = document.getElementById('myCanvas3') myimg.src = 'data:image/jpeg;base64,' + faceImg } else if (msg.data.indexOf('GetBase64') == 0) { let s = msg.data.substring(10) let myimg = document.getElementById('myCanvas2') myimg.src = 'data:image/jpeg;base64,' + s alert(s) } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) { let s = msg.data.substring(27) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetOcrFromFileName') == 0) { let s = msg.data.substring(19) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetDogSN') == 0) { let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } } else { let reader = new FileReader() reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { let url = msg.target.result; document.getElementById('myCanvas').src = url; } } reader.readAsDataURL(msg.data) } }, close: function () { // console.log("socket已经关闭") this.socket.close() this.socket = '' }, handleFileChange(event) { let file = event.target.files[0] if (file) { this.UpFile.push(file) } }, sfzCard2() { let _this = this let res = { errorMsg: 'OK', resultContent: { "address": "江西省赣州市寻乌县长宁镇镇山路14号402室", "birthday": "19960515", "effectDate": "20231010", "expireDate": "20431010", "gender": "1", "idNum": "360734199605150074", "issueOrg": "寻乌县公安局", "name": "韩菲", "nation": "01", "photo": "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" } } if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } }, // 获取身份证信息 async sfzCard() { let _this = this let res = await readCard() if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } else { if(this.$route.name == 'selectFile') { setTimeout(() => { this.sfzCard() }, 1000) } } }, // 图片处理 imgDeals(re) { let file = this.dataURLtoFile('data:image/png;base64,' + re, 'sfzTx.png') let formData = new FormData() formData.append('file', file) formData.append('colorEnum', 'CLEAR') changeIdPhotoBgc(formData).then((res) => { console.log(res) this.photo = res.previewPath }) }, // 读取U盘 readUsb() { let data = { extensions: 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,png' } readUsb(data).then((res) => { // console.log(res) if (res) { if(this.UpFile.length != res.length) { // console.log(this.UpFile , res) this.UpFile = res this.usbList = [] res.forEach(re =>{ this.usbList.push({ name: re, sta: false }) }) } } else { this.UpFile = [] this.usbList = [] this.cite.state = { name: '请插入U盘', sta: true } } if(this.$route.name == 'selectFile') { setTimeout(() =>{ this.readUsb() },1000) } }) }, // 处理选中文件 async dealFile() { let {usbList} = this await usbList.forEach(re =>{ if(re.sta) { this.readFile(re.name) } }) }, async readFile(url) { let res = await readFile({filePath: url}) console.log(res) this.cite.selectedFile.push(res.data) }, }, destroyed() { // 销毁监听 if(this.socket) { this.close() } }, mounted() { this.cite.selectedFile = [] if (this.cite.modeName == "扫描打印") { this.init(); }else if(this.cite.modeName == "身份证打印") { this.sfzCard() }else if(this.cite.modeName == "U盘打印") { this.readUsb() } } } </script> <style scoped lang="less"> @font-face { font-family: 'STHeiti';//自定义字体名字 src: url('../assets/typeface/STHeiti.ttf') format('truetype');//定义好文件的相对地址 } @font-face { font-family: 'OCR';//自定义字体名字 src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype');//定义好文件的相对地址 } .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 9.69rem; .main { width: 31.63rem; height: 26.56rem; background: #ffffff; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; padding: 1rem 0; overflow-y: scroll; .li { padding-left: 1rem; .name { min-height: 1.8rem; text-align: left; max-width: 80%; margin-left: 1rem; } img { width: 1.3rem; margin-left: 1rem; } } } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; position: relative; input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; } } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; //text-align: left; span { text-decoration: underline; font-size: 1.5rem; font-weight: bold; color: #323232; line-height: 2rem; } .act { color: #52a39d; } } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { //width: 42.81rem; width: 20rem; margin: 0 10rem; height: 35.31rem; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box { width: 25rem; height: 15rem; margin-right: 5rem; position: relative; font-weight: 500; font-size: .9rem; line-height: 1rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.6rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.5rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; .month { margin-left: 1.7rem; } .day { margin-left: 1.2rem; } } .card-addr { width: 11rem; position: absolute; top: 8.1rem; left: 4.5rem; text-align: left; line-height: 1.3rem; } .card-id { position: absolute; bottom: .8rem; left: 8rem; letter-spacing: .2rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } .card-box2 { position: relative; font-family: 'OCR'; margin: 0 auto; img { width: 100%; } .diamond { position: absolute; top: 0; //left: 60px; right: 0; height: 100%; //font-size: 12px; text-align: left; left: 3.75rem; font-size: 0.75rem; .name { //font-size: 14px; font-family: 'STHeiti'; //margin: 23px 0 10px; font-size: 0.875rem; margin: 1.4375rem 0 0.625rem; } .gender { div { //margin-left: 50px; margin-left: 3.125rem; } } .birth { //margin: 12px 0; margin: 0.75rem 0; span { //margin-right: 3px; margin-right: 0.1875rem; } div { //width: 20px; //margin-left: 11px; text-align: center; width: 1.25rem; margin-left: 0.6875rem; } } .addr { //width: 140px; //line-height: 18px; width: 8.75rem; line-height: 1.125rem; } .idNum { position: absolute; font-family: 'STHeiti'; font-weight: 500; left: 2.875rem; font-size: 1rem; letter-spacing: 0.0625rem; bottom: 1.5rem; } .avatar { position: absolute; //right: 20px; //width: 96px; //top: 30px; right: 1.25rem; width: 6rem; top: 1.875rem; } } .diamond2 { //left: 130px; height: auto; top: auto; //bottom: 21px; left: 8.125rem; bottom: 1.3125rem; .sign { //margin-bottom: 14px; margin-bottom: 0.875rem; } } } } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52a39d; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } </style>
Show line notes below
GitBucket
4.23.0
GitBucket
4.23.0