快捷導(dǎo)航

vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的簡(jiǎn)單示例

更新時(shí)間：2022年12月27日 09:05:53 作者：小余又菜又愛(ài)玩前端

在vue項(xiàng)目中難免遇到有要生成條形碼或者二維碼的功能需求,下面這篇文章主要給大家介紹了關(guān)于vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

1.條形碼插件jsbarcode

安裝：npm install jsbarcode --save

引入：在需要生成條形碼的頁(yè)面引入即可

import JsBarcode from 'jsbarcode'

需要顯示條形碼的頁(yè)面里

<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

引入：同理，在需要生成二維碼的頁(yè)面中引入即可

import QRCode from 'qrcodejs2'

需要顯示二維碼的頁(yè)面中

<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;

好啦，如果只需要將二維碼展示出來(lái)，不需要點(diǎn)擊按鈕才生成二維碼或不需要打印的小伙伴看到這里就行啦~

打?。。。?/p>

在寫(xiě)二維碼打印的時(shí)候我真的栓q住了，嗚嗚嗚~ 因?yàn)檫M(jìn)入打印頁(yè)面后，點(diǎn)擊取消，再次點(diǎn)擊打印我驚訝地發(fā)現(xiàn)給我生成了兩個(gè)二維碼，然后……嗯，沒(méi)錯(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]);
}