怎麼下載一個zip檔案？

王铁柱6發表於2024-11-27

在前端開發中，下載 zip 檔案的方法有很多，以下是幾種常見的方式：

1. 使用 <a> 標籤的 download 屬性 (適用於較小的檔案):

這是最簡單的方法，適用於生成 zip 檔案內容後可以直接提供下載連結的情況。 它利用瀏覽器內建的下載機制，不需要額外的 JavaScript 庫。

function downloadZip(zipBase64, filename) {
  const link = document.createElement('a');
  link.href = `data:application/zip;base64,${zipBase64}`;
  link.download = filename;
  link.style.display = 'none'; // 隱藏連結
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link); // 下載後移除連結
}

// Example usage:  假設你已經生成了 base64 編碼的 zip 檔案內容
const zipContent = "UEsDB..."; // Your base64 encoded zip data
downloadZip(zipContent, 'my_zip_file.zip');

優點: 簡單易用，相容性好。
缺點: 不適合下載大檔案，因為 base64 編碼會增加檔案大小，並且瀏覽器記憶體可能會溢位。 也無法顯示下載進度。

2. 使用 JavaScript 庫，例如 JSZip:

JSZip 是一個強大的 JavaScript 庫，用於建立、讀取和修改 zip 檔案。它可以處理更大的檔案，並提供更好的控制。

import JSZip from 'jszip';

async function downloadZipWithJSZip(files) {
  const zip = new JSZip();
  for (const file of files) {
    zip.file(file.name, file.content);
  }

  const zipBlob = await zip.generateAsync({ type: "blob" });

  const link = document.createElement('a');
  link.href = URL.createObjectURL(zipBlob);
  link.download = 'my_zip_file.zip';
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(link.href); // 釋放記憶體
}

// Example usage:
const files = [
  { name: 'file1.txt', content: 'File 1 content' },
  { name: 'file2.txt', content: 'File 2 content' }
];

downloadZipWithJSZip(files);

優點: 靈活，可以處理大檔案，可以動態新增檔案到 zip 壓縮包。
缺點: 需要引入額外的庫。

3. 使用 FileSaver.js (配合 JSZip 或其他生成 Blob 的方法):

FileSaver.js 是一個專門用於儲存檔案的 JavaScript 庫，它提供了一個更簡潔的 API，並可以更好地處理不同瀏覽器的相容性問題，尤其是在儲存大檔案時。

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

// ... (JSZip code from example 2 to generate zipBlob) ...

saveAs(zipBlob, 'my_zip_file.zip'); // 使用 FileSaver.js 儲存檔案

優點: 簡化儲存檔案的程式碼，提高相容性，尤其是在處理大檔案時。
缺點: 需要引入額外的庫。

4. 從伺服器端獲取 zip 檔案:

如果 zip 檔案已經存在於伺服器上，最簡單的方法是透過 AJAX 請求獲取檔案，然後觸發下載。

fetch('/path/to/your/zipfile.zip')
  .then(resp => resp.blob())
  .then(blob => {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'my_zip_file.zip'; // 可以從伺服器響應頭中獲取檔名
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(link.href);
  });

優點: 對於已存在的 zip 檔案，這是最有效的方法。可以利用伺服器端的資源和效能。
缺點: 需要伺服器端的支援。

選擇哪種方法取決於你的具體需求，例如檔案大小、是否需要動態生成 zip 檔案內容、以及專案中已有的依賴庫等。 對於簡單的下載小檔案，<a> 標籤的 download 屬性就足夠了。對於更復雜的需求，建議使用 JSZip 和 FileSaver.js。

相關文章