vue二维码的批量生成及下载

<template>
  
    <div style="display: none" class="QRCode" ref="qrCodeUrl"></div>
    <el-button size="small" type="primary" @click="createQrCode">下载二维码</el-button>
    
</template>

<script>
import FileSaver from 'file-saver';
import JSZip from 'jszip';
import QRCode from 'qrcodejs2';

export default {
  components: {},
  data() {
    return {
        ids:[
            "0e369d5c-d3de-4c62-cde8-08da269410c5",
            "3126134b-3c7f-440a-cde7-08da269410c5"
        ],
        QRCodeURL:[],            //存放生成的二维码图片地址
    };
  },

  created() {},

  methods: {
    // 生成二维码
    createQrCode() {
      if(!this.ids.length)return;
      document.querySelector('.QRCode').innerHTML = "";  // 清空div中的二维码图片
      this.ids.forEach((each) => {                       // 循环创建二维码
          new QRCode(this.$refs.qrCodeUrl, {             // 将创建好的二维码图片放在div中
            text: each,                                  // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          })
      })

      let a = new Promise((resolve) => {
        setTimeout(() => {
          this.QRCodeURL = [];
          document.querySelectorAll('.QRCode img').forEach((each) => { // 查找div中的二维码图片
            this.QRCodeURL.push(each.src);                             // 保存创建的二维码图片地址
          })
          return resolve();
        }, 5000);
        
      })

      a.then(() => {
        this.batchQrCodeZip();                                      // 下载打包二维码图片
      })
      
    },

    
    batchQrCodeZip () {
      const zip = new JSZip()        //新建一个压缩文件
      const _this = this
      const promises = []
      for (const key in this.QRCodeURL) {
        const promise = _this.getFile(this.QRCodeURL[key]).then(data => { // 根据二维码图片地址下载文件, 并存成ArrayBuffer对象
            zip.file(`${key}` + '.png', data, { binary: true })           // 逐个添加文件，需要加后缀".png"
        })
        promises.push(promise);
      }

      Promise.all(promises).then(() => {
        zip.generateAsync({ type: 'blob' })
        .then(content => {
            // 生成二进制流
            FileSaver.saveAs(content, '二维码') // 利用file-saver保存文件  自定义文件名
        })
      })
      .catch(res => {
        console.log(res);
      })
    },

    // 根据二维码图片地址下载二维码
    getFile (url) {
      return new Promise((resolve, reject) => {
        axios({
            method: 'get',
            url,
            responseType: 'blob'
        }).then(response => {
            resolve(response.data)
        }).catch(error => {
            reject(error.toString())
        })
      })
    },


};

</script>


<style lang='less' scoped>
</style>