vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的简单示例

import JsBarcode from 'jsbarcode'

<img id="barcode1">

let barCode1 = this.info.marIdCode;
let barheight = this.imgHeight;
JsBarcode("#barcode1",barCode1,{
    format:"CODE128",//条形码的格式
    width:1,//线宽
    height:barheight,//条码高度
    lineColor:"#000",//线条颜色
    displayValue:false,//是否显示文字
    margin:2//设置条形码周围的空白区域
})

import QRCode from 'qrcodejs2'

<div id="SetQRCode"></div>

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 //容错率，L/M/H
})
this.qrcode = qrcode;

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]);
}