vue项目中使用vueQr和qrcodejs2生成二维码和下载功能

生成二维码的插件有两个分别是qrcodejs2和vueQr,vueQ生成的二维码中间可以放头像

本项目是vueQr,搭配el-table一起使用

下载依赖包 cnpm install vue-qr --save

页面引入 import vueQr from "vue-qr";

        components: {
    
     vueQr },

页面结构

      <div id="qrcode" ref="qrcode"></div>
            <el-table
            :data="tableDatas"
            style="width: 100%"
            max-height="600px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" fixed />
            <el-table-column prop="drname" label="二维码">
              <template slot-scope="{ row }">
                <el-tooltip content="点击下载二维码" placement="top-start">
                  <span @click="downloadImg(row.drid, row.drname)">
                    <vue-qr
                      :ref="'Qrcode' + row.drid"
                      :text="
                        'path:' +
                        142 +
                        ',' +
                        'drid:' +
                        row.drid +
                        ',' +
                        'mdcode:' +
                        row.mdcode +
                        ',' +
                        'drname:' +
                        row.drname +
                        ',' +
                        'drtypeid:' +
                        row.drtypeid
                      "
                      :margin="10"
                      :size="500"
                      :width="30"
                    />
                  </span>
                </el-tooltip>
              </template>
            </el-table-column>
       </el-table>
       //text扫码获取的内容

属性说明:

downloadImg() 生成二维码之后下载的方法

downloadImg(link_id, name) {
    
    
      console.log(link_id, name);
      const iconUrl = this.$refs["Qrcode" + link_id].$el.src;
      //console.log(iconUrl, "iconUrl");
      this.downloadFile(name, iconUrl);
    },

    downloadFile(fileName, content) {
    
    
      let aLink = document.createElement("a");
      let blob = this.base64ToBlob(content); //new Blob([content]);
      let evt = document.createEvent("HTMLEvents");
      // console.log("点击下载", evt);
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName; //图片的名称
      aLink.href = URL.createObjectURL(blob);
      // aLink.dispatchEvent(evt);
      aLink.click();
      // 下载完成之后移除a的事件
      document.body.removeChild(aLink);
    },

    // base64转换blob
    base64ToBlob(code) {
    
    
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
    
    
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {
    
     type: contentType });
    },

最后效果

qrcodejs2只是简单做的Demo,也能生成二维码.只是下载有点麻烦最后采用的是vueQr

生成二维码方法

 qrcode() {
    
    
      let mdcode = this.property[0].mdcode == null ? "" : this.property[0].mdcode;
      let reg = /[0-9]+/g;
      let projectId = parseInt(this.path);
      let name = this.path.replace(reg, "");
      let drid = this.property[0].drid;
      let drname = this.property[0].drname;
      let drtypename = this.property[0].drtypename;
      new QRCode("qrcode", {
    
    
        width: 232, // 设置宽度
        height: 232, // 设置高度
        text: `设备编号: ${
      
      mdcode},项目ID: ${
      
      projectId},项目名: ${
      
      name},设备ID: ${
      
      drid},设备名称: ${
      
      drname},设备类型: ${
      
      drtypename}`,
      });
    },

  // 生成二维码
    createQRcode() {
    
    
      if (this.property.length != 1) {
    
    
        this.$message.error("选择设备资产数量超过1或者未选择设备资产！");
      } else {
    
    
        let qrcode = document.getElementById("qrcode");
        qrcode.innerHTML = "";
        this.$nextTick(function () {
    
    
          this.qrcode();
        });
      }
    },