vue中多文件打包下载

>>补充说明，接口请求默认为axios、安装默认使用npm

1.安装依赖

npm install jszip -S

npm install file-saver -S

2.引入依赖

import JSZip from 'jszip';

import FileSaver from 'file-saver';

3.具体方法

/* 自定义axios实例 */
let instance=axios.create({
    "baseURL":process.env.VUE_APP_apiCtx,
    "withCredentials":false,
});
/* 下载文件 */
export function getFile(url,filename){
    return new Promise((resolve, reject) => {
        instance.get(url,{responseType: 'arraybuffer',
        "responseType": 'blob'}).then(res => {
            resolve(res.data);
        }).catch((error) => {
            console.error(error);
        })
    })
}
/* 打包文件
   @param{*} data 打包下载路径数组
   @param{*} name 打包文件名
 */
export function handleBatchDownload(data,name){
    // const data = ['各类地址1', '各类地址2'] // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
    const zip = new JSZip();
    const cache = {};
    const promises = [];
    data.forEach(item => {
        const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
            const arr_name = item.split("/")
            const file_name = arr_name[arr_name.length - 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 => { // 生成二进制流
            FileSaver.saveAs(content, name) // 利用file-saver保存文件
            
        })
    })
}

>>>补充，a标签download属性不能直接下载跨域的文件，使用3中的getFile方法

getFile(url).then(res=>{
   let a = document.createElement('a');
   let url = window.URL.createObjectURL(res);
   a.href = url;
   // a.download = filename;
  let arr_name = url.split("/")
  a.download = arr_name[arr_name.length - 1] // 获取文件名
  a.click();
  window.URL.revokeObjectURL(url);
});