vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的簡(jiǎn)單示例
1.條形碼插件jsbarcode
安裝：npm install jsbarcode --save
引入：在需要生成條形碼的頁面引入即可
import JsBarcode from 'jsbarcode'
需要顯示條形碼的頁面里
<img id="barcode1">
調(diào)用構(gòu)造函數(shù)生成條形碼
let barCode1 = this.info.marIdCode;
let barheight = this.imgHeight;
JsBarcode("#barcode1",barCode1,{
format:"CODE128",//條形碼的格式
width:1,//線寬
height:barheight,//條碼高度
lineColor:"#000",//線條顏色
displayValue:false,//是否顯示文字
margin:2//設(shè)置條形碼周圍的空白區(qū)域
})2.二維碼插件
安裝：npm install qrcodejs2 --save
引入：同理，在需要生成二維碼的頁面中引入即可
import QRCode from 'qrcodejs2'
需要顯示二維碼的頁面中
<div id="SetQRCode"></div>
根據(jù)自身需求邏輯使用
let qrCode = "#"+this.info.marId+"#"+this.info.supManufacturingBatch+"#"+this.info.exp+"#"+this.info.minflowId+"#"+this.info.num;
this.QRCode = qrCode;
let qrcodeDiv = document.getElementById("SetQRCode")
let qrcode = new QRCode(qrcodeDiv,{
text:this.QRCode,//二維碼中的內(nèi)容
width:this.QRWidth,
height:this.QRHeight,
colorDark:"#000",//二維碼顏色
correctLevel: QRCode.CorrectLevel.L //容錯(cuò)率，L/M/H
})
this.qrcode = qrcode;好啦，如果只需要將二維碼展示出來，不需要點(diǎn)擊按鈕才生成二維碼或不需要打印的小伙伴看到這里就行啦~
打?。。?！
在寫二維碼打印的時(shí)候我真的栓q住了，嗚嗚嗚~ 因?yàn)檫M(jìn)入打印頁面后，點(diǎn)擊取消，再次點(diǎn)擊打印我驚訝地發(fā)現(xiàn)給我生成了兩個(gè)二維碼，然后……嗯，沒錯(cuò)，重復(fù)上述操作會(huì)一直新生成二維碼。
因此需要?jiǎng)h除之前生成的二維碼。代碼如下：
let qrCode = "#"+this.info.marId+"#"+this.info.supManufacturingBatch+"#"+this.info.exp+"#"+this.info.minflowId+"#"+this.info.num;
this.QRCode = qrCode;
let qrcodeDiv = document.getElementById("SetQRCode")
let qrcode = new QRCode(qrcodeDiv,{
text:this.QRCode,
width:this.QRWidth,
height:this.QRHeight,
colorDark:"#000",
correctLevel: QRCode.CorrectLevel.L
}
this.qrcode = qrcode;
// ………………………………………………………………(解決重復(fù)點(diǎn)擊打印按鈕會(huì)重復(fù)一直生成二維碼)
let childs = document.getElementById("SetQRCode").childNodes;
for(let i = childs.length -2 ; i>=0 ; i--){
document.getElementById("SetQRCode").removeChild(childs[i]);
}總結(jié)
到此這篇關(guān)于vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的文章就介紹到這了,更多相關(guān)vue生成條形碼和二維碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue cli使用融云實(shí)現(xiàn)聊天功能的實(shí)例代碼
最近小編接了一個(gè)新項(xiàng)目，項(xiàng)目需求要實(shí)現(xiàn)一個(gè)聊天功能，今天小編通過實(shí)例代碼給大家介紹vue cli使用融云實(shí)現(xiàn)聊天功能的方法，感興趣的朋友跟隨小編一起看看吧2019-04-04
element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值詳解
vue+elementUI項(xiàng)目中el-cascader級(jí)聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue實(shí)現(xiàn)帶自動(dòng)吸附功能的懸浮球
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶自動(dòng)吸附功能的懸浮球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue中watch監(jiān)聽器用法之deep、immediate、flush
Vue是可以監(jiān)聽到多層級(jí)數(shù)據(jù)改變的,且可以在頁面上做出對(duì)應(yīng)展示,下面這篇文章主要給大家介紹了關(guān)于vue中watch監(jiān)聽器用法之deep、immediate、flush的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue項(xiàng)目打包之開發(fā)環(huán)境和部署環(huán)境的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目打包之開發(fā)環(huán)境和部署環(huán)境的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了Vuex 注入 Vue 生命周期的過程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
Vue 項(xiàng)目中使用布局組件來創(chuàng)建頁面布局的方式是完全可行的，而且在很多項(xiàng)目中都被廣泛采用，包括像 ruoyi 這樣的框架，這篇文章主要介紹了vue?layout模板頁的使用,需要的朋友可以參考下2023-08-08
VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能
本系列文章介紹一個(gè)簡(jiǎn)單的實(shí)時(shí)定位示例，基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09
Vue實(shí)現(xiàn)關(guān)聯(lián)頁面多級(jí)跳轉(zhuǎn)（頁面下鉆）功能的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)關(guān)聯(lián)頁面多級(jí)跳轉(zhuǎn)（頁面下鉆）功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03