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

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

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

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

<!-- 下載圖片，瀏覽器會(huì)自動(dòng)推斷文件名和類型
<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)點(diǎn)：

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

2、語義化好。

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

缺點(diǎn)：

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

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

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

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

這種方式本質(zhì)上是導(dǎo)航到一個(gè)URL，如果服務(wù)器在該URL響應(yīng)時(shí)設(shè)置了 Content-Disposition: attachment; filename=“filename.ext” 這樣的HTTP頭部，瀏覽器就會(huì)觸發(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)點(diǎn)：

1、實(shí)現(xiàn)簡(jiǎn)單。

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

缺點(diǎn)：

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

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

3、請(qǐng)求控制： 同樣無法添加自定義請(qǐng)求頭。

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

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

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

原理：

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

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

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

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

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

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

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

優(yōu)點(diǎn)：

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

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

3、錯(cuò)誤處理： 可以精確捕獲和處理請(qǐng)求過程中的錯(cuò)誤。

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

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

缺點(diǎn)：

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

2、需要處理 Blob 和 Object URL。

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

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

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

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

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

總結(jié)

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

最新評(píng)論