Vue 实现批量下载附件（JPG、PNG、PDF、EXCEL）打包压缩Zip包功能。

最新推荐文章于 2024-05-14 11:11:08 发布

爱萝莉太酷了

最新推荐文章于 2024-05-14 11:11:08 发布

阅读量710

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/ChenJMingGg/article/details/132159025

版权

npm install jszip
npm install axios
import JSZip from "jszip";
import axios from "axios";

async batchXiaZzCli() {
this.batchLoading = true;
try {
// 创建一个JSZip实例
const zip = new JSZip();
// 循环下载文件并添加到压缩包中
for (let i = 0; i < this.checkedCities.length; i++) {
const response = await axios.get(this.checkedCities[i].reduceFileUrl, { responseType: "arraybuffer" });
// 获取文件名（如果文件名相同则只会下载一份，所以这里将名字加上了i）
const fileName = i + 1 + this.checkedCities[i].oldName;
// 将文件添加到压缩包中
zip.file(fileName, response.data);}
// 生成压缩包
const content = await zip.generateAsync({ type: "blob" });
// 创建下载链接
const downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(content);
downloadLink.download = `批量附件下载（${this.checkedCities.length}）.zip`;
// 点击下载链接自动下载
downloadLink.click();
this.batchLoading = false;
} catch (error) {
console.error(error);
}
},