前端下载ZIP包方法总结

在前端实现下载 ZIP 包到本地，通常有以下几种方法，具体取决于 ZIP 包的来源（静态文件、后端生成、前端动态生成等）：

---

方法 1：直接下载静态文件（最简单）

如果 ZIP 包是服务器上的静态文件，可以直接通过 <a> 标签的 download 属性实现下载。

<a href="/path/to/yourfile.zip" download="filename.zip">点击下载</a>

或通过 JavaScript 动态触发：

const link = document.createElement('a');
link.href = '/path/to/yourfile.zip';
link.download = 'filename.zip';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

---

方法 2：从后端获取文件流（Blob）

如果 ZIP 包由后端动态生成并通过接口返回，可以使用 fetch 或 XMLHttpRequest 获取文件流，再通过 Blob 下载。

示例代码（使用 fetch）：

fetch('/api/download-zip')
  .then(response => response.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'filename.zip'; // 设置文件名
    a.click();
    window.URL.revokeObjectURL(url); // 释放内存
  });

示例代码（使用 XMLHttpRequest）：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/download-zip', true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    const blob = xhr.response;
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'filename.zip';
    a.click();
    window.URL.revokeObjectURL(url);
  }
};

xhr.send();

---

方法 3：前端动态生成 ZIP 包（需第三方库）

如果需要在浏览器中动态生成 ZIP 文件，可以使用 JSZip 库。

示例代码：

1. 安装依赖：

npm install jszip file-saver

2. 前端代码：

import JSZip from 'jszip';
import { saveAs } from 'file-saver';

// 创建 ZIP 实例
const zip = new JSZip();

// 向 ZIP 中添加文件（示例：文本文件）
zip.file('hello.txt', 'Hello World!');

// 添加图片（假设图片通过 fetch 获取）
fetch('/path/to/image.png')
  .then(response => response.blob())
  .then(blob => {
    zip.file('image.png', blob);
    return zip.generateAsync({ type: 'blob' });
  })
  .then(content => {
    saveAs(content, 'archive.zip'); // 使用 file-saver 保存文件
  });

---

注意事项

1. 文件名问题：

   • 后端需设置响应头 Content-Disposition: attachment; filename="filename.zip"，确保浏览器正确识别文件名。
   • 前端动态生成时，通过 a.download = 'filename.zip' 指定文件名。

2. 跨域问题：

   • 如果文件在不同域，需配置 CORS 或使用代理。

3. 大文件处理：

   • 大文件下载需考虑分片或进度提示（如 axios 的 onDownloadProgress）。

4. 浏览器兼容性：

   • download 属性在 IE 和部分移动端浏览器中不兼容，需降级处理（如直接打开链接）。

---

根据实际场景选择合适的方法！