正常下载导出网上代码是很多的,但业务经常会出现一次要下载很多个文件的情况,如果一个一个点的话太麻烦了,这时候就需要实现批量下载并且合并成zip压缩文件

需要的2个库jszipfile-saver

jszip是一个用于创建、读取和编辑.zip文件的JavaScript库,且API的使用也很简单。

file-saver是用于文件保存的

这里只是核心逻辑,具体逻辑还需要根据业务情况修改

import Zip from 'jszip';
import {saveAs} from 'file-saver';
import axios from 'axios';

function batchDownload(){
	 let downloadUrl = ['xxx','xxx','xxx']
	 let promises =[]
	 const zip = new Zip();
	 for(let item of downloadUrl){
	   let axios = getFile(item).then(({data})=>{
	     let fileName = '文件名.doc' //文件名需要做处理 必须加后缀
	     zip.file(fileName, data, {binary: true});
	   })
	   promises.push(axios)
	 }
	
	  Promise.all(promises).then(() => {
	   if (Object.keys(zip.files).length > 0) {
	     zip.generateAsync({type: 'blob'}).then((blob) => {
	       saveAs(blob, '批量文件.zip');
	       console.log('批量下载成功')
	     });
	   } else {
	     console.log('下载全部失败')
	   }
	 });
}

function getFile(url){
	return new Promise((resolve, reject) => {
       axios({
         url,
         method: 'GET',
         responseType: 'blob',
       })
         .then((data) => {
           resolve(data);
         })
         .catch((err) => {
           reject(err.toString());
         });
     });
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐