前端下載檔案的方式有哪些？

王铁柱6發表於2024-12-09
前端

前端下載檔案的方式主要有以下幾種：

1. 使用<a>標籤的download屬性:

這是最簡單和最常用的方法，適用於小檔案和文字檔案。透過建立一個隱藏的<a>標籤，設定其href屬性為檔案的URL，download屬性為檔名，然後觸發其點選事件即可下載檔案。

function downloadFile(url, filename) {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// 示例用法：
downloadFile('/path/to/your/file.pdf', 'mydocument.pdf');
downloadFile('data:text/plain;charset=utf-8,' + encodeURIComponent('Hello, world!'), 'hello.txt'); // 下載文字內容

優點： 簡單易用，相容性好。
缺點： 對於大檔案下載效率低，無法顯示下載進度，且對於跨域資源下載受限。

2. 使用URL.createObjectURL() 和 <a>標籤:

這種方法適用於 Blob 或 File 物件，例如從 canvas 或 input[type="file"] 獲取的資料。

function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  URL.revokeObjectURL(url); // 釋放記憶體
  document.body.removeChild(link);
}

// 示例用法：
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
downloadBlob(blob, 'hello.txt');

優點： 可以下載 Blob 和 File 物件，適用於動態生成的檔案。
缺點： 同樣對於大檔案下載效率低，無法顯示下載進度。

3. 使用XMLHttpRequest或fetch API:

這種方法可以實現更精細的控制，例如顯示下載進度和處理錯誤。適用於較大檔案的下載。

function downloadFileWithProgress(url, filename) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (xhr.status === 200) {
      downloadBlob(xhr.response, filename);
    }
  };
  xhr.onprogress = function(event) {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      console.log(`Downloaded ${percentComplete}%`); // 顯示下載進度
    }
  };
  xhr.send();
}

// 使用fetch API
async function downloadFileWithFetch(url, filename) {
  const response = await fetch(url);
  if (response.ok) {
    const blob = await response.blob();
    downloadBlob(blob, filename);
  }
}

優點： 可以顯示下載進度，可以處理錯誤，適用於大檔案下載。
缺點： 實現較為複雜。

4. 使用第三方庫:

例如 FileSaver.js，可以簡化檔案下載的處理，並提供更好的相容性。

選擇哪種方法取決於你的具體需求:

  • 對於簡單的下載需求，<a>標籤的download屬性就足夠了。
  • 對於需要下載 Blob 或 File 物件的情況，可以使用URL.createObjectURL()。
  • 對於需要顯示下載進度或處理錯誤的情況，可以使用XMLHttpRequest或fetch API。
  • 對於需要更好的相容性和更方便的 API，可以使用第三方庫。

希望以上資訊對您有所幫助！

相關文章