批量下载文件并打包成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：

<script src="https://cdn.jsdelivr.net/npm/jszip@3.6.0/dist/jszip.min.js"></script>

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