批量下载文件并打包成Zip的JavaScript函数

     在前端开发中，有时候我们需要提供一个功能，让用户一次性下载多个文件并打包成一个 Zip 文件，以便更便捷地进行资源管理。本文将详细介绍一个用于实现这一功能的 JavaScript 函数，同时解释其中使用到的关键工具。

工具介绍

axios

        axios 是一个基于 Promise 的 HTTP 请求库，用于浏览器和 Node.js 环境。在我们的函数中，axios 负责从指定的 URL 下载文件。

npm install axios

JSZip

        JSZip 是一个操作 ZIP 文件的 JavaScript 库。我们使用 JSZip 创建和操作 ZIP 文件，将下载的文件逐一添加到 ZIP 中，并最终生成一个包含所有文件的 Zip 文件。

安装方式：

npm install jszip

或者直接在HTML文件中引入JSZip的CDN：

file-saver

        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文件进行下载。

函数的输入参数包括： 

• data：需要下载打包的文件下载地址数组。每个地址可以是本地文件路径或跨域文件路径。
• fileName：打包文件的默认文件名，默认为'打包下载.zip'。
• otherFiles：一个包含其他文件的数组，每个文件包括fileName和blob属性。fileName表示文件名，blob表示文件内容。

        函数内部使用JSZip库创建一个新的zip文件对象。然后，通过遍历data数组，对每个文件下载地址进行处理。通过调用getFile函数，可以下载文件并将其以ArrayBuffer对象的形式获取到。然后，将文件内容添加到zip文件对象中，使用cache对象进行缓存。最后，通过Promise.all等待所有文件处理完毕后，调用zip对象的generateAsync方法生成一个blob二进制流。再使用FileSaver库将二进制流保存为文件，并提示用户进行下载。

总之，这个函数可以方便地将多个文件下载地址和其他文件打包成一个zip文件进行下载。