某溯源平台：vue生成二维码压缩包下载(二)

项目还需要下载二维码打印，依赖两个包：
1.jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，
2.工作需要通过 JavaScript 保存文件到本地，我们都知道 JavaScript 基于安全的考虑，是不允许直接操作本地文件的。IE 可以通过 VB 插件的方式进行，而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件，所以 VB 插件的方式存在兼容性问题。那有没有适合的方法呢？答案是肯定的，我们可以通过 FileSaver.js 这个小插件实现我们的需求。

import JSZip from 'jszip'
import FileSaver from 'file-saver'

这里需要先处理我的数据，选中的对象才要下载：

 在data中声明  downcheckArr: []
// 遍历对象
    traversalObject(obj) {
      for (var item in obj) {
        if (obj[item].checked) { this.downcheckArr.push(obj[item].traceCode) } // 显示URL的值
        if (Object.prototype.toString.call(obj[item]) === '[object Array]' || Object.prototype.toString.call(obj[item]) === '[object Object]') {
          this.traversalObject(obj[item]); // 递归遍历
        }
      }
    },

之后打成下载包

downloadZip() {
      this.downcheckArr.length = 0;
      this.traversalObject(this.qrCodeGroup)

      //  下载所需数据筛选
      const img_list =
        this.downCodeGroup.filter((item) => this.downcheckArr.indexOf(Number(item.traceCode)) > -1)
      const blogTitle = '溯源平台' // 下载的文件夹名称
      const zip = new JSZip()
      const imgs = zip.folder(blogTitle)
      const baseList = []
      for (let i = 0; i < img_list.length; i++) {
        const name = img_list[i].traceCode
        // 每张图片的名称
        const image = new Image()
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function () {
          const canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          const context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          const url = canvas.toDataURL() // 得到图片的base64编码数据 let url =
          canvas.toDataURL('image/png')
          baseList.push({ name: name, img: url.substring(22) })
          if (baseList.length === img_list.length) {
            if (baseList.length > 0) {
              for (let k = 0; k < baseList.length; k++) {
                imgs.file(baseList[k].name + '.png', baseList[k].img, {
                  base64: true
                })
              }
              zip.generateAsync({ type: 'blob' }).then(function (content) {
                FileSaver.saveAs(content, blogTitle + '.zip')
              })
            }
          }
        }
        image.src = img_list[i].traceCodeUrl
      }
    }