快捷導(dǎo)航

前端下載ZIP包常見(jiàn)的三種方法總結(jié)

更新時(shí)間：2025年09月16日 10:23:12 作者：時(shí)小雨

下載ZIP文件通常與前端開(kāi)發(fā)技術(shù)沒(méi)有直接關(guān)系,因?yàn)橄螺d文件是瀏覽器和操作系統(tǒng)的基本功能,這篇文章主要介紹了前端下載ZIP包常見(jiàn)的三種方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

方法 1：直接下載靜態(tài)文件（最簡(jiǎn)單）

如果 ZIP 包是服務(wù)器上的靜態(tài)文件，可以直接通過(guò) <a> 標(biāo)簽的 download 屬性實(shí)現(xiàn)下載。

<a href="/path/to/yourfile.zip" rel="external nofollow"  download="filename.zip">點(diǎn)擊下載</a>

或通過(guò) JavaScript 動(dòng)態(tài)觸發(fā)：

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 包由后端動(dòng)態(tài)生成并通過(guò)接口返回，可以使用 fetch 或 XMLHttpRequest 獲取文件流，再通過(guò) 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'; // 設(shè)置文件名
    a.click();
    window.URL.revokeObjectURL(url); // 釋放內(nèi)存
  });

示例代碼（使用 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：前端動(dòng)態(tài)生成 ZIP 包（需第三方庫(kù)）

如果需要在瀏覽器中動(dòng)態(tài)生成 ZIP 文件，可以使用 JSZip 庫(kù)。

示例代碼：

安裝依賴：

npm install jszip file-saver

前端代碼：

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

// 創(chuàng)建 ZIP 實(shí)例
const zip = new JSZip();

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

// 添加圖片（假設(shè)圖片通過(guò) 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 保存文件
  });

注意事項(xiàng)

文件名問(wèn)題：
- 后端需設(shè)置響應(yīng)頭 Content-Disposition: attachment; filename="filename.zip"，確保瀏覽器正確識(shí)別文件名。
- 前端動(dòng)態(tài)生成時(shí)，通過(guò) a.download = 'filename.zip' 指定文件名。
跨域問(wèn)題：
- 如果文件在不同域，需配置 CORS 或使用代理。
大文件處理：
- 大文件下載需考慮分片或進(jìn)度提示（如 axios 的 onDownloadProgress）。
瀏覽器兼容性：
- download 屬性在 IE 和部分移動(dòng)端瀏覽器中不兼容，需降級(jí)處理（如直接打開(kāi)鏈接）。

根據(jù)實(shí)際場(chǎng)景選擇合適的方法！

附：前端實(shí)現(xiàn)批量下載并打包成ZIP文件

以下是使用Vue.js實(shí)現(xiàn)批量下載并打包成ZIP文件的示例代碼。

安裝依賴：

npm install axios jszip file-saver --save

代碼：

<template>
  <div>
    <!-- 下載按鈕，根據(jù)loading狀態(tài)禁用 -->
    <button :disabled="loading" @click="handleDownload">
      {{ loading ? '正在下載...' : '批量下載' }}
    </button>
  </div>
</template>

<script>
import axios from 'axios';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

export default {
  name: 'FileDownloader',
  data() {
    // 初始化文件列表和loading狀態(tài)
    return {
      fileList: [
        { name: 'file1.txt', url: 'http://example.com/file1.txt' },
        // 其他文件對(duì)象...
      ],
      loading: false // 初始化loading狀態(tài)為false
    };
  },
  methods: {
    async handleDownload() {
      this.loading = true; // 開(kāi)始下載前設(shè)置loading狀態(tài)為true

      try {
        const zip = new JSZip(); // 創(chuàng)建一個(gè)新的JSZip對(duì)象

        // 異步下載每個(gè)文件并添加到zip中
        for (const file of this.fileList) {
          // 使用axios以blob格式下載文件
          const response = await axios.get(file.url, { responseType: 'blob' });
          // 將下載的blob轉(zhuǎn)換為JSZip可以處理的Uint8Array
          zip.file(file.name, new Uint8Array(response.data));
        }

        // 生成ZIP文件的blob對(duì)象
        const content = await zip.generateAsync({ type: 'blob' });
        // 使用file-saver觸發(fā)文件下載
        saveAs(content, 'bundle.zip');
      } catch (error) {
        console.error('批量下載失敗:', error);
      } finally {
        this.loading = false; // 下載完成后，無(wú)論成功或失敗，重置loading狀態(tài)
      }
    }
  }
};
</script>