如何生成条形码、二维码,我这里就做一种方法来实现,后面我发现了新的再加上来
目录
- 条形码:jsbarcode插件
- 二维码:jr-qrcode插件
一、条形码
1、添加插件
npm install jsbarcode --save
或者:packjson添加 "jsbarcode": "^3.11.0"
2、导包
import JsBarcode from 'jsbarcode'
3、二维码容器:支持三种形式,img/svg/canvas,根据自己的需要三选一即可
<svg id="barcode"></svg>
<canvas id="canvas"></canvas>
<img id="barcode"/>
4、调用构造函数,生成条形码。构造函数的使用也有两种形式,这里只介绍简单的使用,更详细的使用请参考:npm jsbarcode
// barcode是方法,receiptOrder我这里是收货单号,可以生成不一样的码
barcode(receiptOrder) {
JsBarcode('#barcode', receiptOrder, {
height: 70,
format: 'CODE128', // 选择要使用的条形码类型
text: 'NO: ' + receiptOrder,
displayValue: true, // 是否在条形码下方显示文字
textPosition: 'bottom' // 设置文本的垂直位置
})
}
效果:
二、二维码
1、插件
cnpm install jr-qrcode --save
2、导包
import jrQrcode from "jr-qrcode"
3、容器
<img :src="qrcodeImg" alt="" class="qrcodeImg">
4、js代码
let imgBase64 = jrQrcode.getQrBase64(text, options); //options为配置对象,支持以下配置参数:
/**
@param: text: 要生成二维码的字符,支持中文
@param: options: {
padding : 10, // 二维码四边空白(默认为10px)
width : 256, // 二维码图片宽度(默认为256px)
height : 256, // 二维码图片高度(默认为256px)
correctLevel : QRErrorCorrectLevel.H, // 二维码容错level(默认为高)
reverse : false, // 反色二维码,二维码颜色为上层容器的背景颜色
background : "#ffffff", // 二维码背景颜色(默认白色)
foreground : "#000000" // 二维码颜色(默认黑色)
}
@return: 生成的二维码Base64 URL
*/
效果: