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

目录

  1. 条形码:jsbarcode插件
  2. 二维码: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' // 设置文本的垂直位置
      })
    }

效果:
image.png

二、二维码

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
*/

效果:
image.png