vue生成二维码和条形码

一、二维码插件 qrcodejs2

安装依赖：npm install qrcodejs2 --save

版本号：

在需要生成二维码的页面引入即可

import QRCode from 'qrcodejs2';

 二维码容器

<!-- 二维码 -->
<div id="qrCode" ref="qrCodeDiv"></div>

 调用 new  QRcode 生成二维码

// 解决重复点击预览按钮会重复生成二维码
if (this.$refs.qrCodeDiv) {
    this.$refs.qrCodeDiv.innerHTML = '';
}
new QRCode(this.$refs.qrCodeDiv, {
    text: "123456", // 需要转换为二维码的内容
    width: 60, //宽度
    height: 60, //高度
    colorDark: '#000000', //二维码方块颜色
    colorLight: '#ffffff', //背景颜色
    correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
});

二维码效果图

 

二、条形码插件  jsbarcode

安装依赖：npm install jsbarcode --save

版本号：

在需要生成条形码的页面引入即可

import JsBarcode from 'jsbarcode';

条形码容器

<svg id="barcode"></svg>

 调用JsBarcode构造函数生成条形码

JsBarcode("#barcode", "Hi world!", {
   format: "CODE128", //选择要使用的条形码类型
   width: 1, //线宽
   height: 36, //条码高度
   text: "123456", //显示文本
   displayValue: true, //是否在条形码下方显示文字
   textPosition: "bottom", //设置文本的垂直位置
   // fontOptions: "bold italic", //使文字加粗体或变斜体
   background: "#fff", //设置条形码的背景
   // font: "fantasy", //设置文本的字体
   lineColor: "#000", //设置条和文本的颜色。
   fontSize: 14, //设置文本的大小
   margin: 8 //设置条形码周围的空白边距
 });

条形码效果图

以上就可以生成二维码、条形码了，不过如果在页面初始化的时候生成可能会出现转码失败的情况，这个时候可以尝试用nextTick包裹，或许可以解决问题 

this.$nextTick(() => {
   JsBarcode("#barcode", "Hi world!", {
     format: "CODE128", //选择要使用的条形码类型
     width: 1, //线宽
     height: 36, //条码高度
     text: "123456", //显示文本
     displayValue: true, //是否在条形码下方显示文字
     textPosition: "bottom", //设置文本的垂直位置
     // fontOptions: "bold italic", //使文字加粗体或变斜体
     background: "#fff", //设置条形码的背景
     // font: "fantasy", //设置文本的字体
     lineColor: "#000", //设置条和文本的颜色。
     fontSize: 14, //设置文本的大小
     margin: 8 //设置条形码周围的空白边距
   });
});