vue批量生成二维码及生成zip包

组件

<template>
  <div class="qcode" style="display: flex; flex-wrap: wrap; height: 300px">
    <div>
      <el-button @click="convertToCanvas">下载zip包</el-button>
    </div>
    <div
      id="printMe"
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-text="正在打包成压缩包,请稍后..."
    >
      <div class="box" :ref="'eqcode' + item.equi_code" v-for="(item, index) in qcode_arr">
        <div></div>
        <div class="left">
          <h2>KETAI固定资产管理卡</h2>
          <div class="item">
            <h3>设备名称</h3>
            <div>{{ item.name }}</div>
          </div>
          <div class="item">
            <h3>设备编号</h3>
            <div>{{ item.equi_code }}</div>
          </div>
        </div>
        <div id="right">
          <canvas :ref="'canvas' + item.equi_code"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//  1.引入依赖
import QRCode from "qrcode";
import JSZip from "jszip";
import FileSaver from "file-saver";
import html2canvas from "html2canvas";

export default {
  name: "qcode",
  data() {
    return {
      qcode_arr: [],
      fileList: [],
      zip_code: [],
      loading: false,
    };
  },

  created() {
    // 循环选中要生成二维码的内容  ids[1,2,3...] 设备id
    this.$nextTick(() => {
      for (let i = 0; i < this.qcode_arr.length; i++) {
        this.useqrcode(this.qcode_arr[i].equi_code, this.qcode_arr[i].name);
      }
    });
  },

  watch: {
    $route: {
      handler: function (newval, oldVal) {
      //将批量勾选的数组赋值到qcode_arr
        this.qcode_arr = JSON.parse(localStorage.getItem("equi"));
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 生成二维码
    useqrcode(e, name) {
      console.log(e);
      let canvas = this.$refs[`canvas${e}`][0]; // 获取当前循环的dom
      console.log(canvas);
      if (!canvas) return; // 没有拿到dom直接返回
      const _this = this;
      // 调用函数去生成二维码，参数依次为：二维码的容器、要生成的内容、配置项、回调函数
      QRCode.toCanvas(canvas, `equi_code=${e}`, this.qrcodeForm, function (error) {
        if (error) {
          console.log(error);
        } else {
          canvas.toBlob((e) => {
            console.log(e);
            // 把生成的二维码放到数组中
            _this.fileList.push({ deviceName: name, file: e });
          });
        }
      });
    },

    // html2canvas转
    async convertToCanvas() {
      this.loading = true;
      const zip = new JSZip();
      var img = zip.folder("images"); // 创建一个'images'文件夹
      for await (const item of this.qcode_arr) {
        let eqcode = this.$refs[`eqcode${item.equi_code}`][0]; // 获取当前循环的dom
        if (!eqcode) return;
        await html2canvas(eqcode, { scale: 1.0, quality: 1.0 }).then((canvas) => {
          const dataURL = canvas.toDataURL();
          // 写入到file文件里
          img.file(`${item.name}二维码.png`, dataURL.split("base64,")[1], { base64: true });
        });
      }
      // 下载zip文件
      zip.generateAsync({ type: "blob" }).then((content) => {
        FileSaver.saveAs(content, "压缩文件.zip");
      });
      this.loading = false;
    },
  },
};
</script>

<style scoped lang="scss">
.qcode {
  // display: flex;
  #printMe {
    display: flex;
    width: 1250px;
    max-width: 1300px;
    justify-content: space-start;
    flex-wrap: wrap;

    .box {
      width: 400px;
      height: 180px;
      padding-left: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: space-around;
      background-color: #fff;
      margin: 7px;

      .left {
        background-color: #fff;
        h2,
        div {
          background-color: #fff;
        }

        .item {
          background-color: #fff;
        }
      }

      #right {
        flex: 1;
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;

        // background-color: yellow;
      }
    }
  }
}
</style>

父页面 (使用组件)

保存批量勾选的数组

  go_Qcode(row) {
    localStorage.setItem("equi", equi);
        this.$router.push({
          name: "qcode"
        });
      } 
    }, //批量生成二维码