实现批量下载的步骤
1、安装axios,异步下载文件
2、将下载的每个文件转为Blob,使用JSZip库将Blob加入到Zip中
3、使用file-saver下载ZIP文件
示例实现:
安装依赖
npm install axios jszip file-saver --save
引入
import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
// 下载全部文件
const downloadAll = () => {
const zip = new JSZip();
const promises = [];
//遍历文件地址
navList.value.forEach(item => {
if('下载地址'){
const promise = getFile('下载地址').then(data => {
const file_name = '文件名称';//获取文件名
zip.file(file_name, data, { binary: true })
});
promises.push(promise);
}
});
Promise.all(promises).then(() => {
zip.generateAsync({ type: "blob" }).then(content => {
// 生成二进制流
FileSaver.saveAs(content, `xxx.zip`);
});
});
}
// 封装异步请求所有文件
const getFile = (url) => {
return new Promise((resolve, reject) => {
axios({
method: "get",
url:url,
responseType: "blob"
})
.then(data => {
resolve(data.data);
})
.catch(error => {
reject(error.toString());
});
});
}