1. 使用js库
2. 实现代码
import JSZip from 'jszip'
import FileSaver from 'file-saver'
getFile = (url) => {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
// 避免 200 from disk cache
url = url + `?r=${Math.random()}`;
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
resolve(); // 避免图片下载失败，导致批量导出失败
}
};
xhr.send();
});
}
// 批量下载
handleBatchDownload = async (selectImgList, idArray) => {
const data = selectImgList;
const zip = new JSZip();
const cache = {};
const promises = [];
await data.forEach((item, index) => {
const promise = this.getFile(item).then((fileData) => {
// 下载文件
const arrName = item.split('/');
let fileName = arrName[arrName.length - 1]; // 获取文件名
// 转码文件名, 上传的文件用decodeURIComponent转汉字
const endIndex = fileName.lastIndexOf('.');
const format = fileName.slice(endIndex);
const startName = fileName.slice(0, endIndex);
const newFileName = decodeURIComponent(startName) + format;
zip.file(newFileName, fileData as any, {
binary: true
}); // 逐个添加文件
cache[newFileName] = fileData;
});
promises.push(promise);
});
Promise.all(promises).then(() => {
zip
.generateAsync({
type: 'blob'
})
.then(async (content) => {
// 生成二进制流；利用file-saver保存文件
FileSaver.saveAs(
content,
`压缩文件.zip`
);
});
});
};
3. 备注
- 请求图片资源异步请求
- 下载需要等待图片全部下载完成
