二維碼和條形碼的生成方法

1. 通過pure-svg-code插件生成二維碼和條形碼

<!--npm下載插件-->
npm install pure-svg-code --save-dev

<img :src="barCode" alt="條形碼">
<img :src="qrCode" alt="二維碼">

import { barcode, qrcode, svg2url } from 'pure-svg-code';

getBarCode() {
    <!--svg-->
    const svgString = barcode("1234567890", "code128", {width:'50', barWidth:1, barHeight:50});
    <!--imgUrl-->
    this.barCode = svg2url(svgString);
    
},
getQrCode() {
    <!--svg-->
    const svgString = qrcode({
      content: "1234567890",
      padding: 0,
      width: 100,
      height: 100,
      color: "#000000",
      background: "#ffffff",
      ecl: "M"    
    });
    <!--imgUrl-->
    this.qrCode = svg2url(svgString);
}

2. 使用JsBarcode生成條形碼

npm install jsbarcode --save

<img id="barcode"/>

$("#barcode").JsBarcode("Hi!");

 3. 生成帶logo的二維碼，使用vue-qr插件

npm install vue-qr --save
// main.js
import VueQr from 'vue-qr';
Vue.use(VueQr);
// 應用
<vue-qr :logoSrc="imgUrl" text="hello" :size="360" :callback="callback" />

callback(dataUrl, id) {
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = 'picName';
    link.click();
}