记录 批量下载文件 zip
使用file-saver 下载文件
使用jszip 转zip包
import { saveAs } from 'file-saver';
import JsZip from 'jszip';
// 点击下载按钮
downlist(list) {
/*
list = [
{
name: 'xxxx',
url: 'xxxxxxx'
}
]
*/
this.dowmurls(list).then((res) => {
if (res.code === 'success') {
// 下载失败的文件 res.errUrls.length > 0
// console.log(res.errUrls);
saveAs(res.content, '批量下载压缩包.zip');
} else {
// "文件下载失败"
}
});
},
// 接收一个文件路径的集合
dowmurls(fileUrls) {
return new Promise((resolve, reject) => {
if (fileUrls.length > 0) {
const zip = new JsZip();
const cache = {};
const downAll = [];
// 错误文件
const errlist = [];
for (let key in fileUrls) {
const promise = this.getFile(fileUrls[key].url).then((data) => {
// 成功的文件
if (data !== 'downerr') {
// 获取文件名
const file_name = fileUrls[key].name;
// 逐个添加文件
zip.file(file_name, data, {
binary: true,
});
// 保存文件
cache[file_name] = data;
} else {
// 保存错误文件
errlist.push(fileUrls[key]);
}
});
// 保存所有的文件
downAll.push(promise);
}
// 统一下载
Promise.all(downAll).then(() => {
// 生成二进制流
zip
.generateAsync({
type: 'blob',
})
.then((content) => {
// 封装的返回文件
let resData = {
// 状态码
code: 'success',
// 存放错误文件数据
errUrls: [],
// 文件流数据
content: null,
};
// 判断是否存在错误文件
resData.errUrls = errlist.length > 0 ? errlist : [];
// 判断错误文件的个数是否等于要下载的文件个数
errlist.length !== fileUrls.length
? (resData.content = content)
: (resData.code = 'error');
// 返回下载结果信息
resolve(resData);
});
});
}
});
},
// 根据文件路径获取这个文件的文件流
getFile(url) {
// return 返回请求的图拼内容 responseType: 'blob';
},