vue二维码批量下载，打包

实现的是二维码的批量加载，与实现,使用到了三个插件分别是：html2canvas，FileSaver，JSZip

效果：

/**图片的下载**/
    async downloadResult () {
      this.disable = 1
      this.loading = Loading.service({
        fullscreen: true,
        background: 'rgba(0,0,0,0.4)',
        text: '二维码码批量下载中，请稍后...'
      })
      setTimeout(() => {
        this.$nextTick(() => {
          var arrImages = []
          let options = { useCORS: true, backgroundColor: null }
          if (document.getElementsByClassName('qrShow').length > 0) {
            var targetDoms = document.getElementsByClassName('qrShow')
          } else {
            var targetDoms = document.getElementsByClassName('qrstyle')
          }
          debugger
          for (let i = 0, len = targetDoms.length; i < len; i++) {
            let txt = targetDoms[i].textContent
            let textAll = txt.substring(1, 5) + '-' + txt.substring(6, txt.length - 4) + '-' + txt.substring(txt.length, txt.length - 4)
            let copyDom = targetDoms[i].cloneNode(true)
            copyDom.style.width = targetDoms[i].clientWidth
            copyDom.style.height = targetDoms[i].clientHeight
            document.querySelector('body').appendChild(copyDom)
            html2canvas(copyDom, options).then(
                canvas => {
                  document.body.removeChild(copyDom)
                  let imgURL = canvas.toDataURL('image/png')
                  console.log(i, imgURL)
                  arrImages.push({fileUrl: imgURL, renameFileName: textAll + '.png'})
                  if (i == len - 1) {
                    console.log('图片包', arrImages)
                    this.filesToRar(arrImages, '二维码打卡点')
                    this.disable = 0
                    this.$nextTick(_ => {
                      this.loading.close()
                    })
                  }
                }
            )
          }
        })
      }, 500)
    },
    /** 文件打包
     * arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]
     * filename 压缩包名
     * */
    filesToRar (arrImages, filename) {
      let _this = this
      let zip = new JSZip()
      let cache = {}
      let promises = []
      _this.title = '正在加载压缩文件'
      for (let item of arrImages) {
        const promise = _this.getImgArrayBuffer(item.fileUrl).then(data => {
          // 下载文件, 并存成ArrayBuffer对象(blob)
          zip.file(item.renameFileName, data, { binary: true }) // 逐个添加文件
          cache[item.renameFileName] = data
        })
        promises.push(promise)
      }
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: 'blob' }).then(content => {
          _this.title = '正在压缩'
          // 生成二进制流
          FileSaver.saveAs(content, filename) // 利用file-saver保存文件 自定义文件名
          _this.title = '压缩完成'
          _this.$message.success('压缩完成')
        })
      }).catch(res => {
        _this.$message.error('文件压缩失败')
      })
    },
// 获取文件blob
    getImgArrayBuffer (url) {
      let _this = this
      return new Promise((resolve, reject) => {
        // 通过请求获取文件blob格式
        let xmlhttp = new XMLHttpRequest()
        xmlhttp.open('GET', url, true)
        xmlhttp.responseType = 'blob'
        xmlhttp.onload = function () {
          if (this.status == 200) {
            resolve(this.response)
          } else {
            reject(this.status)
          }
        }
        xmlhttp.send()
      })
    },