快捷導航

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

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

在vue項目中難免遇到有要生成條形碼或者二維碼的功能需求,下面這篇文章主要給大家介紹了關(guān)于vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的相關(guā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 //容錯率，L/M/H
})
this.qrcode = qrcode;

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

打印?。。?/p>

在寫二維碼打印的時候我真的栓q住了，嗚嗚嗚~ 因為進入打印頁面后，點擊取消，再次點擊打印我驚訝地發(fā)現(xiàn)給我生成了兩個二維碼，然后……嗯，沒錯，重復上述操作會一直新生成二維碼。

因此需要刪除之前生成的二維碼。代碼如下：

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;
// ………………………………………………………………(解決重復點擊打印按鈕會重復一直生成二維碼)
let childs = document.getElementById("SetQRCode").childNodes;
for(let i = childs.length -2 ; i>=0 ; i--){
    document.getElementById("SetQRCode").removeChild(childs[i]);
}