vue多个excel链接文件变成压缩包下载

背景：如果数据量小，前端就直接用a标签下载当前的链接，但是数据量比较大之后，后台分了好几个excel文件链接到前端，然后点击下载的时候统一打包成一个压缩包进行下载；

一、安装依赖

npm install --save axios JSZip FileSaver

二、单个文件下载：

直接使用a标签进行下载；

this.downloadOne('url链接');
methods：{
    downloadOne(url) {
        let element = document.createElement('a');   
        element.setAttribute('href',url)
        element.setAttribute('download', '下载数据') ;               
        element.style.display = 'none'
        element.click();  
        return false;
    }
}
复制代码

三、多个文件下载：

1.引用插件：

import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from "file-saver"
复制代码

2.调用方法以及下载方法：

let url=['链接一'、'链接二']
this.zipLoad(url);
methods：{
    zipLoad(url) {
      const zip = new JSZip();
      const cache = {};
      const promises = [];
      url.forEach(item => {   //循环调用getFile
        const promise = this.getFile(item).then(res=>{
          const arr_name = item.split('/');
          const file_name = arr_name[arr_name.length-1] //设置文件名
          zip.file(file_name,res,{binary:true})
          cache[file_name] = res;
        })
        promises.push(promise)
      });
      Promise.all(promises).then(() =>{  //所有的promise请求都通过之后进行打包下载；
        zip.generateAsync({type:'blob'}).then(res=>{
          FileSaver.saveAs(res,"报表数据.zip");
        })
      }).catch(res=>{
          console.log('下载失败')
      })
    },
    getFile(url){
      return new Promise((resolve,reject) => {
        axios({
          method:'get',
          url,
          responseType:'arraybuffer'
        }).then(data=>{
          resolve(data.data);
        }).catch(error => {
          reject(error.toString());
        })
      })
    },
}
复制代码