?????在前端开发中，有时候我们需要提供一个功能，让用户一次性下载多个文件并打包成一个 Zip 文件，以便更便捷地进行资源管理。本文将详细介绍一个用于实现这一功能的 JavaScript 函数，同时解释其中使用到的关键工具。
????????axios?是一个基于 Promise 的 HTTP 请求库，用于浏览器和 Node.js 环境。在我们的函数中，axios 负责从指定的 URL 下载文件。
npm install axios
????????JSZip?是一个操作 ZIP 文件的 JavaScript 库。我们使用 JSZip 创建和操作 ZIP 文件，将下载的文件逐一添加到 ZIP 中，并最终生成一个包含所有文件的 Zip 文件。
安装方式：
npm install jszip或者直接在HTML文件中引入JSZip的CDN：
<script src="https://cdn.jsdelivr.net/npm/jszip@3.6.0/dist/jszip.min.js"></script>
????????file-saver 是一个用于在浏览器中保存文件的库。它允许我们将生成的 Zip 文件保存到用户的本地文件系统中，以便用户随后进行下载。
安装方式：
npm install file-saver???????下面是实现批量下载文件并打包成Zip文件的JavaScript函数：
import axios from 'axios';
import JSZip from 'jszip';
import FileSaver from 'file-saver';
/**
* handleBatchDownload函数：批量下载文件并打包成Zip文件
* @param {Array} data - 需要下载打包的文件地址数组
* @param {string} fileName - 打包文件的默认文件名，默认为'打包下载.zip'
* @param {Array} otherFiles - 其他文件数组，每个文件包括fileName和blob属性
*/
export const handleBatchDownload = (data, fileName = '打包下载.zip', otherFiles) => {
const zip = new JSZip(); // 创建JSZip实例用于操作Zip文件
const cache = {}; // 缓存已下载文件内容
const promises = []; // 用于存储下载文件的Promise数组
// 处理传入的文件数据
data.forEach(item => {
const promise = getFile(item.url).then(data => {
const fileName = item.fileName;
zip.file(fileName, data, { binary: true }); // 将文件逐个添加到Zip文件
cache[fileName] = data; // 缓存文件内容
});
promises.push(promise);
});
// 处理其他文件数据
if (otherFiles) {
otherFiles.forEach(item => {
zip.file(item.fileName, item.blob, { binary: true }); // 将其他文件逐个添加到Zip文件
cache[item.fileName] = item.blob; // 缓存文件内容
promises.push(Promise.resolve(item.blob));
});
}
// 等待所有文件处理完成
Promise.all(promises).then(() => {
// 生成Zip文件并保存
zip.generateAsync({ type: 'blob' }).then(content => {
FileSaver.saveAs(content, fileName);
});
});
};
// getFile函数：通过axios从指定URL下载文件并返回Promise
const getFile = url => {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
responseType: 'arraybuffer'
}).then(data => {
resolve(data.data);
}).catch(error => {
reject(error.toString());
});
});
};
// 需要下载打包的文件下载地址
const fileData = [];
// 示例其他文件
const otherFiles = [
{ fileName: '文件1.txt', blob: new Blob(['Additional File Content']) },
// 添加更多其他文件信息...
];
// 调用函数
handleBatchDownload(fileData, 'MyDownload.zip', otherFiles);
????????如上所示这是一个用于处理批量下载文件的JavaScript函数。它的功能是将一个包含多个文件下载地址和其他文件的数据数组，打包成一个zip文件进行下载。
函数的输入参数包括：?
????????函数内部使用JSZip库创建一个新的zip文件对象。然后，通过遍历data数组，对每个文件下载地址进行处理。通过调用getFile函数，可以下载文件并将其以ArrayBuffer对象的形式获取到。然后，将文件内容添加到zip文件对象中，使用cache对象进行缓存。最后，通过Promise.all等待所有文件处理完毕后，调用zip对象的generateAsync方法生成一个blob二进制流。再使用FileSaver库将二进制流保存为文件，并提示用户进行下载。
总之，这个函数可以方便地将多个文件下载地址和其他文件打包成一个zip文件进行下载。