Vue (七) | 生成条形码，二维码

708 次访问 2020-01-08

qiwuhedy

如何生成条形码、二维码，我这里就做一种方法来实现，后面我发现了新的再加上来

条形码：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
*/

效果：