用canvas画图，动态替换图片，并批量下载，a标签会下载失败，因为太大了，所以用JSZip打包下载

canvas画图借用html2canvas插件

画好后，用JSZip打包下载

先构建数组用于批量下载

// 批量下载海报开始代码
// this.piliangQRCodeList  是某个方法中获取的，我做的时候，来自与element-ui的el-select组件的多选属性得到的数组
//  this.codeList  从接口获取的数据，格式为Array
      let doms = [] //自定义数组
       for (let i = 0; i < this.piliangQRCodeList.length; i++) {
        for (let j = 0; j < this.codeList.length; j++) {
          if (this.piliangQRCodeList[i] == this.codeList[j].name) {  // 遍历获取你想要的数据，全部push到自定义的数组中
             doms.push({
               name: this.codeList[j].name,
              class: '.moban',
               url: this.codeList[j].url
            })
          }
       }
     }
 // 以上步骤做完，我们就获取到了带有数据的doms数组了，接下来把这个数组传入画canvas的方法中
 this.drawCanvas(doms) // this是vue的全局对象
// 下面的this.drawCanvas(doms)方法
// 绘制canvas 因为是异步的所有用async修饰了
    async drawCanvas(arr) {
      // 批量下载海报开始
       for (let i = 0; i < arr.length; i++) {
         this.QrCodeImg = arr[i].url // 动态替换每一次画的图上的一个二维码的图片，是网络图片，url的那种，如果是本地的，应该是不行的。不能识别路径。具体可以自己去试，我没有试本地相对路径
         const dom1 = document.querySelector(arr[i].class);
         const canvas1 = await html2canvas(dom1, {useCORS: true, scale: 9}) // useCORS是允许图片跨域，scale是放大的倍数。
         arr[i].canvas = canvas1
       }
       // 这是等待canvas全部画完后，调用了打包下载的方法。传进去的是一个数组
      this.getBase64Image(arr)
    },
//  getBase64Image方法
// 将canvas转换为base64格式并打包下载
    getBase64Image(arr) {
      var zip = new JSZip()//*****创建实例，zip是对象实例
      var file_name =  '模板.zip' // 定义zip包的名字
      let zipimg = zip.folder('模板') // 定义解压后的zip的文件夹的名字
      for(var i = 0; i < arr.length; i++) {
        var dataURL = arr[i].canvas.toDataURL("image/png",1.0) // 1.0是不失真的画
        var imgUrl = dataURL.split(',')[1] // 把生成的base64字符，删掉了image/png base64,生成base64一共有1000多万的字符，在18.8M大小左右，本来想传数据库的，用作下次直接调用接口使用，不用再画了，很遗憾，传不上去。
        zipimg.file(arr[i].name + '.png',imgUrl,{base64: true});        // Urls.push(Urls)
      }
      zip.generateAsync({type:"blob"})  // 异步去打包下载canvas
        .then(content => {
          saveAs(content, file_name)// savaAs的方法在JSZip的原码中没有引入，需要自己装好JSZip包后去node_modules里找到，拿出来放到自己的项目中，再引入页面中用。
          this.loading = false // 这是element-ui提供的loading窗。怎么使用请参考element-ui
        })
    },