二维码生成 单个下载 批量打包下载

 安装引入插件

import VueQr from "vue-qr";
import JSZip from "jszip";
import FileSaver from "file-saver";

 components: {  VueQr, JSZip, FileSaver },

 单个下载

 <div
        id="qrCode"
        ref="qrCode"
        style="display: flex; flex-direction: column; align-items: center"
      >
        <vue-qr :text="text" :size="200"></vue-qr>
        <div>{{ zzssmc }}</div>
      </div>
      <div style="margin-top: 20px; display: flex; justify-content: center">
        <el-button type="primary" @click="getQrCodeImage(zzssmc)"
          >下载</el-button
        >
        <el-button @click="openewm = false">取消</el-button>
      </div>

 

 getQrCodeImage(zzssmc) {
      var canvasData = document
        .getElementById("qrCode")
        .getElementsByTagName("img");
      console.log(canvasData, 123);

      var a = document.createElement("a");
      a.href = canvasData[0].src;
      a.download = zzssmc + "二维码.png";
      a.click();
    },

循环展示二维码数据

 <div style="display: flex; flex-wrap: wrap">
        <div
          :class="'code-mar'"
          ref="qrCode"
          v-for="item in ewmlist"
          :key="item.id"
          style="display: flex; flex-direction: column; align-items: center"
        >
          <vue-qr :text="item.id.toString()" :size="200"></vue-qr>
          <div>{{ item.zzssmc }}</div>
        </div>
      </div>
      <div style="margin-top: 20px; display: flex; justify-content: center">
        <el-button type="primary" @click="getQrCodeImage1()">下载</el-button>
        <el-button @click="openewm1 = false">取消</el-button>
      </div>

 批量下载打包

 getQrCodeImage1() {
        //获取二维码图片
      let a = document.querySelectorAll(".code-mar img").forEach((item) => {
        this.qrFile1.push(item.src);
      });
     //获取二维码名称
      let b = document.querySelectorAll(".code-mar div").forEach((item) => {
        this.qrFile2.push(item.innerHTML);
      });
   
        //处理数组，获得想要的格式
      let arr = [];
      for (let i = 0; i < this.qrFile1.length; i++) {
        let obj = new Object();
        obj.src = this.qrFile1[i];
        obj.name = this.qrFile2[i];
        this.qrFile.push(obj);
      }

      this.getUrl();
    },
    getUrl() {
      const zip = new JSZip();
      this.qrFile.forEach((item, index) => {
        console.log(item, 33);
        zip.file(
          item.name + ".png",  //打包文件名字
          item.src.replace(/^data:image\/(png|jpg);base64,/, ""),//插入打包图片，处理格式问题
          { base64: true }
        ); //向zip中添加文件
      });
      zip.generateAsync({ type: "blob" }).then((content) => {
        // 生成二进制流
        FileSaver.saveAs(content, "批量导出" + "--二维码.zip"); // 利用file-saver保存文件
      });
    },