一、<a> 標(biāo)簽的 download 屬性 (最簡單)

這是實現(xiàn)文件下載最簡單直接的方式，尤其適用于下載靜態(tài)資源或已知URL的文件。

HTML5為 <a> 標(biāo)簽引入了 download 屬性。當(dāng)用戶點擊帶有 download 屬性的鏈接時，瀏覽器會強制下載鏈接指向的資源，而不是導(dǎo)航到它。你還可以為 download 屬性指定一個值，作為建議的下載文件名。

<!--下載同源文件，并建議文件名為report.pdf 
<a href="/files/report.pdf" rel="external nofollow"  download="report.pdf'>下載報告</a>

<!-- 下載圖片，瀏覽器會自動推斷文件名和類型
<a href="/images/logo.png" rel="external nofollow"  download>下載Logo</a>

<!-- 下載跨域文件(需要服務(wù)器設(shè)置 Access-Control-Allow-0rigin)
<a href="https://example,com/somefile.zip" rel="external nofollow"  download="archive.zip">下載跨域文件</a>

優(yōu)點：

1、實現(xiàn)簡單，無需JavaScript。

2、語義化好。

3、兼容性好 (現(xiàn)代瀏覽器都支持)。

缺點：

1、同源限制： 對于跨域資源，如果服務(wù)器沒有設(shè)置正確的 Access-Control-Allow-Origin 頭部，download 屬性可能會被忽略（瀏覽器可能仍會嘗試導(dǎo)航而不是下載，或者下載的文件名不是你指定的）。

2、動態(tài)內(nèi)容： 不適用于需要動態(tài)生成或通過API獲取數(shù)據(jù)后再下載的場景。

3、請求控制： 無法添加自定義請求頭（如Authorization）。

二、window.open() 或 window.location.href

這種方式本質(zhì)上是導(dǎo)航到一個URL，如果服務(wù)器在該URL響應(yīng)時設(shè)置了 Content-Disposition: attachment; filename=“filename.ext” 這樣的HTTP頭部，瀏覽器就會觸發(fā)下載。

// 直接導(dǎo)航，依賴服務(wù)器響應(yīng)頭
function downloadFileFromServer(url) {
  window.location.href=url;
}
// 在新標(biāo)簽頁嘗試打開，也依賴服務(wù)器響應(yīng)頭
function downloadFileInNewTab(url) {
  window.open(url,' blank');
}
// 使用示例
downloadFileFromServer('/api/download/data.csv');
downloadFileInNewTab('https://example.com/api/get-file?id=123');

優(yōu)點：

1、實現(xiàn)簡單。

2、可以下載跨域文件，只要服務(wù)器正確設(shè)置了響應(yīng)頭。

缺點：

1、文件名控制在后端： 文件名由服務(wù)器的 Content-Disposition 頭部決定，前端無法直接控制（除非文件名在URL參數(shù)中）。

2、用戶體驗： window.location.href 會導(dǎo)致當(dāng)前頁面跳轉(zhuǎn)，如果下載失敗或響應(yīng)不是文件流，用戶體驗可能不好。window.open() 可能被彈出窗口攔截器阻止。

3、請求控制： 同樣無法添加自定義請求頭。

4、不適用于Blob數(shù)據(jù)： 不適用于前端生成的Blob數(shù)據(jù)下載。

三、使用 Fetch API 或 XMLHttpRequest (XHR) + Blob + URL.createObjectURL()

這是目前最靈活和強大的前端下載方式，尤其適用于需要認證、動態(tài)生成內(nèi)容或處理從API獲取的二進制數(shù)據(jù)。

原理：

1、使用 Fetch API 或 XHR 向服務(wù)器發(fā)送請求，獲取文件數(shù)據(jù)。將響應(yīng)體（通常是二進制數(shù)據(jù)）轉(zhuǎn)換為 Blob 對象。

2、Blob 對象表示一個不可變的、原始數(shù)據(jù)的類文件對象。

3、使用 URL.createObjectURL(blob) 為這個 Blob 對象創(chuàng)建一個臨時的URL。這個URL指向瀏覽器內(nèi)存中的數(shù)據(jù)。

4、創(chuàng)建一個隱藏的 <a> 標(biāo)簽，將其 href 屬性設(shè)置為這個臨時URL，并設(shè)置 download 屬性為期望的文件名。

5、通過JavaScript模擬點擊這個 <a> 標(biāo)簽，觸發(fā)下載。

6、（可選但推薦）下載完成后，使用 URL.revokeObjectURL(objectURL) 釋放之前創(chuàng)建的臨時URL，以避免內(nèi)存泄漏。

async function downloadWithFetch(apiUrl,filename = 'downloaded-file') {
  try {
    const response =await fetch(apiUrl,{
      method:'GET'，//或'POST'，可以帶請求體
      headers:
        'Authorization':'Bearer YOUR ACCESS TOKEN'，// 示例:添加認證頭
        // 'Content-Type':'application/json' // 如果是POST請求且有請求體。
        // body:JSON.stringify({params:'some_param'}) // 示例:POST請求體
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const blob=await response.blob(); // 獲取響應(yīng)體為Blob對象
    const url = URL.create0bjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    // 需要將a標(biāo)簽添加到D0M中才能觸發(fā)點擊(在某些瀏覽器中
    document,body.appendchild(a);
    a.click();
  
    // 清理
    document.body.removechild(a);
    URL.revoke0biectURL(url);  // 釋放URL對象
    console.log('文件下載成功');
  } catch (error) {
    console.error('下載失敗:'，error);
  }
}

優(yōu)點：

1、完全控制： 可以設(shè)置自定義請求頭（如認證信息）、請求方法、請求體。

2、處理動態(tài)數(shù)據(jù)： 非常適合從API獲取數(shù)據(jù)后下載。

3、錯誤處理： 可以精確捕獲和處理請求過程中的錯誤。

4、進度指示： XMLHttpRequest 支持 progress 事件，可以實現(xiàn)下載進度條（Fetch API 也可以通過 ReadableStream 實現(xiàn)，但相對復(fù)雜些）。

5、前端生成文件： 可以將前端生成的Canvas圖像、JSON數(shù)據(jù)等轉(zhuǎn)換為Blob直接下載。

缺點：

1、實現(xiàn)相對復(fù)雜。

2、需要處理 Blob 和 Object URL。

3、注意內(nèi)存管理，及時 revokeObjectURL。

選擇哪種下載方式取決于具體的需求：

1、最簡單場景（靜態(tài)文件）： 優(yōu)先考慮 <a> 標(biāo)簽的 download 屬性。

2、需要服務(wù)器處理并返回文件流（可跨域）： window.open() 或 window.location.href，并確保服務(wù)器設(shè)置 Content-Disposition。

3、需要自定義請求（如認證）、處理API返回的二進制數(shù)據(jù)、或希望對下載過程有更多控制： 使用 Fetch API 或 XHR 結(jié)合 Blob 和 URL.createObjectURL()。

總結(jié)

到此這篇關(guān)于JavaScript文件下載多種實現(xiàn)方法的文章就介紹到這了,更多相關(guān)JS文件下載方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論