实现 ZIP 打包并提供下载功能，可以使用前端 JavaScript 实现，结合 JSZip 库完成文件的压缩和打包。以下是实现步骤：

步骤 1：引入 JSZip 库

通过 npm 安装或直接使用 CDN 引入 JSZip：

安装 JSZip：

npm install jszip

或通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/jszip"></script>

步骤 2：实现 ZIP 打包和下载

以下是核心代码，用于将多个文件打包成 ZIP 并提供下载：

<input type="file" id="fileInput" multiple />
<button id="downloadZip">下载 ZIP</button>
<script src="https://cdn.jsdelivr.net/npm/jszip"></script>
<script>
  const fileInput = document.getElementById("fileInput");
  const downloadZipButton = document.getElementById("downloadZip");

  downloadZipButton.addEventListener("click", async () => {
    const files = fileInput.files;

    if (!files.length) {
      alert("请选择要打包的文件！");
      return;
    }

    const zip = new JSZip();

    // 将文件添加到 ZIP 中
    for (const file of files) {
      const fileData = await file.arrayBuffer(); // 读取文件内容为 ArrayBuffer
      zip.file(file.name, fileData); // 添加文件到 ZIP
    }

    // 生成 ZIP 文件
    zip.generateAsync({ type: "blob" }).then((content) => {
      // 创建下载链接
      const a = document.createElement("a");
      const url = URL.createObjectURL(content);
      a.href = url;
      a.download = "files.zip";
      a.click();
      URL.revokeObjectURL(url); // 释放 URL
    });
  });
</script>

功能解释

1. 文件选择：

   • 使用 <input type="file" multiple /> 元素允许用户选择多个文件。
   • fileInput.files 提供了用户选择的文件列表。

2. JSZip 创建 ZIP 文件：

   • zip.file(name, data) 方法将文件添加到 ZIP 包中。
   • generateAsync({ type: "blob" }) 生成 ZIP 文件，并返回一个 Blob 对象。

3. 下载 ZIP 文件：

   • 使用 URL.createObjectURL 将 Blob 转化为临时 URL。
   • 创建一个 <a> 元素，设置其 href 属性为生成的 URL，并触发下载。

步骤 3：扩展功能（可选）

a. 支持嵌套文件夹

如果需要支持文件夹结构，可以使用 zip.folder(folderName) 创建文件夹，再将文件添加到该文件夹中。

const folder = zip.folder("myFolder");
folder.file("example.txt", "Hello, World!");

b. 显示打包进度

可以在 generateAsync 的 onUpdate 回调中显示打包进度。

zip.generateAsync({ type: "blob" }, (metadata) => {
  console.log(`压缩进度: ${metadata.percent.toFixed(2)}%`);
});

c. 支持图片、音频、视频等文件

JSZip 支持多种文件类型，可以直接将文件内容作为 Blob 或 ArrayBuffer 添加到 ZIP 中。