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

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

浏览量：3152 时间：2019-12-22 来源：小阳光而已丶

废话不多说，直接上demo

1. 引入FileSaver和jszip

npm install file-saver --savenpm 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保存文件            })      })}