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

vue中生成条形码(jsbarcode)、二维码(qrcodejs2)相关推荐

C#利用ZXing.Net生成条形码，二维码和带Logo的二维码
本文是利用ZXing.Net在WinForm中生成条形码,二维码的小例子,仅供学习分享使用,如有不足之处,还请指正. 什么是ZXing.Net? ZXing是一个开放源码的,用Java实现的多种格式的 ...
C# 利用ZXing.Net来生成条形码和二维码
本文是利用ZXing.Net在WinForm中生成条形码,二维码的小例子,仅供学习分享使用,如有不足之处,还请指正. 什么是ZXing.Net? ZXing是一个开放源码的,用Java实现的多种格式的 ...
JAVA使用barcode4j生成条形码和二维码图片以及带logo的二维码，验证码图片
二维码 1.Maven引入barcode4j依赖 <dependency><groupId>net.sf.barcode4j</g ...
用ZXing 生成条形码和二维码图片
关于ZXing 就不用多介绍了,本问主要介绍如何使用ZXing 生成条形码和二维码的图片. Release 版本的dll下载地址:http://zxingnet.codeplex.com/ 下载完成后 ...
碎步二：zxing核心包生成条形码和二维码
最近闲得无趣,于是写点技术知识放到博客上,希望以后对自己有所帮助.随着时代的发展,二维码已经悄悄的被时代所认可,不管是个人或者公司,二维码受到很多人的认可,如今在互联网上二维码几乎随处可见.废话不多说 ...
EXCEL 批量生成条形码、二维码方案
一. 通过条码字体生产条形码 1.网上下载C39HrP24DhTt 条码字体,导入win10 fonts文件夹,excel 中引用C39HrP24DhTt 字体进行显示. (68条消息) Excel ...
只需3个步骤，轻松解决程序员在Java中生成、扫描二维码难题
条形码包含有关产品或公司的信息,以机器可读的形式直观地表示.条码广泛用于跟踪货物和库存管理.我们可以在 WPF 应用程序中轻松生成各种类型的条码.二维码广泛用于分享重要信息.对于不同的要求,您可能希望 ...
使用Spire.Barcode程序库生成条形码、二维码
一.Spire.Barcode 控件安装 1.VS 中新建 winform 项目,然后再 " 程序包管理控制台 " 中输入 " install-package Spir ...
微信小程序之生成条形码和二维码
需求描述:商家用扫描枪扫用户条形码或二维码实现支付. 效果图: 说明:微信小程序.支付宝小程序的条形码和二维码都可以由一串数字通过 barcode.js 和 qrcode.js 插件绘制在页面的 Ca ...

vue中生成条形码(jsbarcode)、二维码(qrcodejs2)

vue中生成条形码(jsbarcode)、二维码(qrcodejs2)相关推荐

最新文章

热门文章