vue （ iview） 批量下载文件（前端打包js），支持跨域

废话不多说，直接上demo

1. 引入FileSaver和jszip

npm install file-saver --save
npm install jszip --save

2. 页面按需引入插件

import saveAs from 'file-saver';
import JSZip from 'jszip'

export default {
  // 特别注意此处需要初始化一下JSZIP
  components: {
		JSZip 
  }
}

3. 核心方法代码

export()
      const zip = new JSZip();
      const cache = {};
      const promises = [];
      const getFile = url => {
            return new Promise((resolve, reject) => {
                  // 利用ajax，此处写法根据各自配置可能略有不同
                  this.$ajax({method:'get', url, responseType: 'arraybuffer'})
                  .then(data => {
                        resolve(data.data)
                  }).catch(error => {
                        reject(error.toString())
                   })
             })
      }
      // selectedList为选择需要下载的列表
      this.selectedList.forEach(item => {
            // item为对象，其中url代表下载地址
            if(item.url){
                  const promise = getFile(item.url)
                  .then(data => {
                        const arr_name = item.recordUrl.split("/");
                        var file_name = arr_name[arr_name.length - 1] // 获取文件名
                        file_name = file_name.substring(file_name.indexOf("&")+1);
                        zip.file(file_name, data, { binary: true }) 
                        cache[file_name] = data
                   })
                   promises.push(promise)
            }
      })
      Promise.all(promises).then(() => {
            zip.generateAsync({type:"blob"}).then(content => {
                  saveAs(content, "压缩文件.zip") // 利用file-saver保存文件
            })
      })
}

4.跨域下载可以参考我的a标签download不起作用这篇文章，走一遍后台，链接：

https://blog.csdn.net/zgjsxzlx/article/details/86543022