前端如何一次下载多个文件
时间: 2024-03-17 10:39:56 浏览: 17
前端可以通过使用 JavaScript 中的 XMLHttpRequest 或 Fetch API 来实现一次下载多个文件。以下是一个使用 XMLHttpRequest 实现一次下载多个文件的示例代码:
```javascript
function downloadFiles(files) {
const zip = new JSZip();
const requests = [];
for (const file of files) {
const request = new XMLHttpRequest();
request.open('GET', file.url, true);
request.responseType = 'blob';
request.onload = function() {
if (request.status === 200) {
const filename = file.name;
const blob = request.response;
zip.file(filename, blob);
}
};
requests.push(request);
}
Promise.all(requests.map(request => {
return new Promise(resolve => {
request.onreadystatechange = function() {
if (request.readyState === 4) {
resolve();
}
};
request.send();
});
})).then(() => {
zip.generateAsync({ type: 'blob' }).then(blob => {
saveAs(blob, 'files.zip');
});
});
}
```
这个函数接受一个文件列表作为参数,然后通过 XMLHttpRequest 对每个文件进行请求,并将得到的 Blob 对象添加到一个 JSZip 实例中。最后,使用 JSZip 生成一个 ZIP 文件并将其保存到本地。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)