生成二維碼

引入QRCode模塊

npm install --save qrcode import QRCode from 'qrcode';

頁面代碼

批量創建二維碼及打印，所以加了個v-for

<div id="printDiv"/**后面打印用到的區域id*/ :disabled="hussar_20Disabled" ref="hussar_20Ref" v-show="!hussar_20Hidden"class="hussar_20 jxd_ins_elContainer lay-container default"><div v-for="(item,index) in hussar_22Data.split(',')" style="float: left;height: 240px"><div><canvas :ref="'canvas'+index" class="canvas" ></canvas></div>//生成二維碼的組件位置<div style="width: 100%;height: 85px; text-align: center"><span style="width:140px;display: inline-block;word-break: break-all;white-space: normal;">{{hussar_21Data.split(',')[index]}}</span></div></div>

點擊生成二維碼按鈕執行

hussar_17Click() {const self = this;var dataList = self.hussar_22Data.split(",")setTimeout(()=>{for (var i = 0; i < dataList.length; i++) {let canvas = this.$refs[`canvas${i}`][0]//獲取頁面循環動態生成的二維碼組件QRCode.toCanvas(canvas,dataList[i],//生成二維碼的數據{width: 170, height: 170, margin: 1.5},//margin調整二維碼的白邊大小function (error) {if (error) {console.log(error);}});}},100)},

生成效果：

識別二維碼

引入QrcodeStream

npm install --save vue-qrcode-reader import { QrcodeStream } from 'vue-qrcode-reader';

頁面代碼

這是二維碼掃描區域，v-if="qrcodeshow"可以用來控制攝像頭的開關（最開始沒加導致攝像頭一直處于被占用狀態）

<van-popup v-if="qrcodeshow" v-model="hussar_5Show" :position="hussar_5Position" closeable ref="hussar_5Ref" class="hussar_5 jxd_ins_ionPopup jxd-popup-mobile default"><qrcode-streamv-show="qrcode":camera="camera":torch="torchActive"@decode="onDecode"//識別成功后的回調@init="onInit"//初始化驗證攝像頭配置（不知道有沒有用，反正寫上沒啥問題）><div><div class="qr-scanner"><div class="box"><div class="line"></div><div class="angle"></div></div><div class="txt1"><div class="myQrcode">將二維碼/條碼放入框內，即自動掃描</div></div></div></div></qrcode-stream></van-popup> ? ? ? onDecode(result) {console.log(result)//result就是識別后的內容self.qrcodeshow=false//識別成功后設為false關閉攝像頭 },async onInit(promise) {const { capabilities } = await promise;const TORCH_IS_SUPPORTED = !!capabilities.torch;try {await promise;} catch (error) {if (error.name === 'NotAllowedError') {this.error = 'ERROR: 您需要授予相機訪問權限';} else if (error.name === 'NotFoundError') {this.error = 'ERROR: 這個設備上沒有攝像頭';} else if (error.name === 'NotSupportedError') {this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主機)';} else if (error.name === 'NotReadableError') {this.error = 'ERROR: 相機被占用';} else if (error.name === 'OverconstrainedError') {this.error = 'ERROR: 安裝攝像頭不合適';} else if (error.name === 'StreamApiNotSupportedError') {this.error = 'ERROR: 此瀏覽器不支持流API';}}},

樣式信息：

.qr-scanner {background-image: linear-gradient(0deg,transparent 24%,rgba(229, 192, 149,0.1) 25%,rgba(229, 192, 149,0.1) 26%,transparent 27%,transparent 74%,rgba(229, 192, 149,0.1) 75%,rgba(229, 192, 149,0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(229, 192, 149,0.1) 25%,rgba(229, 192, 149,0.1) 26%,transparent 27%,transparent 74%,rgba(229, 192, 149,0.1) 75%,rgba(229, 192, 149,0.1) 76%,transparent 77%,transparent);background-size: 3rem 3rem;background-position: -1rem -1rem;width: 100%;/* height: 100%; */height: 400px;/* height: 288px; */position: relative;background-color: #1110;/* background-color: #111; */}/* .qrcode-stream-wrapper {display: flex;justify-content: center;align-items: center;margin-top: 82px;clear: both;} *//* .qrcode-stream-wrapper >>> .qrcode-stream-camera {width: 213px;height: 210px;clear: both;margin-top: 39px;} */.qr-scanner .box {width: 213px;height: 213px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);overflow: hidden;border: 0.1rem solid rgba(229, 196, 118, 0.2);/* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */}.qr-scanner .txt1 {width: 100%;height: 35px;line-height: 35px;font-size: 14px;text-align: center;/* color: #f9f9f9; */margin: 0 auto;position: absolute;top: 80%;left: 0;}.qr-scanner .myQrcode {text-align: center;color: rgba(229, 192, 149,0.99);}.qr-scanner .line {height: calc(100% - 2px);width: 100%;background: linear-gradient(180deg, rgba(229, 192, 149, 0) 43%, rgba(229, 192, 149) 211%);border-bottom: 2px solid rgba(63, 229, 221, 0.99);transform: translateY(-100%);animation: radar-beam 2s infinite alternate;animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);animation-delay: 1.4s;}.qr-scanner .box:after,.qr-scanner .box:before,.qr-scanner .angle:after,.qr-scanner .angle:before {content: '';display: block;position: absolute;width: 3vw;height: 3vw;border: 0.2rem solid transparent;}.qr-scanner .box:after,.qr-scanner .box:before {top: 0;border-top-color: rgba(229, 220, 159, 0.67);}.qr-scanner .angle:after,.qr-scanner .angle:before {bottom: 0;border-bottom-color: rgba(229, 220, 159, 0.67);}.qr-scanner .box:before,.qr-scanner .angle:before {left: 0;border-left-color:rgba(229, 220, 159, 0.67);}.qr-scanner .box:after,.qr-scanner .angle:after {right: 0;border-right-color: rgba(229, 220, 159, 0.67);}

Vue打印指定區域

js原生的windows.print()會將整個頁面打印出來，所以使用vue-print-nb

安裝并在main.js或index.js中注冊

npm i vue-print-nb import Print from 'vue-print-nb' Vue.use(Print);

頁面代碼：

<el-button tabindex="" :disabled="hussar_19Disabled" v-print="printObj" ref="hussar_19Ref"v-show="!hussar_19Hidden" class="hussar_19 jxd_ins_elButton lay-btn button_additional default"><i class=""></i><span>打印</span> </el-button> data() {return {printObj: {id: "printDiv", // 這里是要打印元素的IDpopTitle: "", // 打印的標題},}

效果圖：

總結

以上是生活随笔為你收集整理的vue二维码生成、打印及识别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。