vue生成条形码(jsbarcode)、二维码(qrcodejs2)
1.条形码插件jsbarcode
安装:npm install jsbarcode --save
引入:在需要生成条形码的页面引入即可
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//设置条形码周围的空白区域
-
})
2.二维码插件
安装:npm install qrcodejs2 --save
引入:同理,在需要生成二维码的页面中引入即可
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;
好啦,如果只需要将二维码展示出来,不需要点击按钮才生成二维码或不需要打印的小伙伴看到这里就行啦~
打印!!!
在写二维码打印的时候我真的栓q住了,呜呜呜~ 因为进入打印页面后,点击取消,再次点击打印我惊讶地发现给我生成了两个二维码,然后……嗯,没错,重复上述操作会一直新生成二维码。
因此需要删除之前生成的二维码。代码如下:
-
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]);
-
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfjaibk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13