快捷導(dǎo)航

前端實現(xiàn)文件下載的幾種常用方式總結(jié)

更新時間：2024年11月27日 10:36:11 作者：zj靖

這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)文件下載的兩種常用方式,兩種方法均通過創(chuàng)建臨時URL并觸發(fā)下載實現(xiàn),文中通過代碼介紹的非常詳細,需要的朋友可以參考下

a標簽：txt、png、jpg、gif等文件，是不提供直接下載，有兼容性問題，特別是IE。
blob：利用 Blob對象可以將文件流轉(zhuǎn)化成 Blob二進制對象。該對象兼容性良好，適用于需要動態(tài)生成或處理非同源文件的情況。‌通過URL.createObjectURL()方法將Blob對象轉(zhuǎn)換為一個臨時的URL下載。

blob對象

Blob對象表示一個不可變、原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進制的格式進行讀取，也可以轉(zhuǎn)換成 ReadableStream來用于數(shù)據(jù)操作。Blob對象是html5新增的對象，它的作用是用來存儲二進制數(shù)據(jù)的，比如圖片、視頻、音頻等，

屬性

size：只讀屬性，Blob中的字節(jié)數(shù)。
type：只讀屬性，表示Blob存放的媒體類型，圖片、視頻、文本文件等等。
它的使用方法如下：

const blob = new Blob([], { type: '' });

URL.createObjectURL

URL.createObjectURL()靜態(tài)方法會創(chuàng)建一個DOMString，其中包含一個表示參數(shù)中給出的對象的URL。這個URL的生命周期和創(chuàng)建它的窗口中的document綁定。這個新的URL對象表示指定的File對象或Blob對象。
當我們的document被銷毀后，這個URL就會失效，所以我們需要在合適的時機銷毀它。

簡單說這個方法用來創(chuàng)建一個url的，它的作用是把一個blob對象轉(zhuǎn)換成一個url，這個url可以用來下載文件，也可以用來預(yù)覽文件。

// 創(chuàng)建下載的鏈接
const url = URL.createObjectURL(blob);
// 釋放掉blob對象
URL.revokeObjectURL(url);

傳統(tǒng)a標簽下載

const a = document.createElement('a'); // 創(chuàng)建a標簽
a.style = 'display: none';
a.download = filename''; // 設(shè)置下載文件名
a.href = url; // 設(shè)置下載地址
document.body.appendChild(a);
a.click(); // 觸發(fā)a標簽的click事件
document.body.removeChild(a);

這種方式無法解決瀏覽器可識別文件直接打開的問題，但是 HTML5 新屬性 download 屬性會解決這個問題。

a標簽 + download屬性

當URL是同源（同域名、同協(xié)議、同端口號）時，這種情況用 a標簽加download屬性的方式即可，download屬性指示瀏覽器該下載而不是打開該文件，同時該屬性值即下載時的文件名；

<a href="path/to/file.jpg" rel="external nofollow"  download='file.jpg'>點擊下載圖片</a>

const a = document.createElement('a'); // 創(chuàng)建a標簽
const e = document.createEvent('MouseEvents'); // 創(chuàng)建鼠標事件對象
e.initEvent('click', false, false); // 初始化事件對象
a.href = url; // 設(shè)置下載地址
a.download = filename || ''; // 設(shè)置下載文件名
a.dispatchEvent(e);

因為a標簽下載只能下載同源的文件，如果是跨域的文件，這里包括圖片、音視頻等媒體文件，都是預(yù)覽，也無法下載。

fetch發(fā)送請求

通過原生fetch請求，動態(tài)生成一個a標簽實現(xiàn)文件下載。
res.blob()該方法是Fetch API的response對象方法，該方法將后端返回的文件流轉(zhuǎn)換為返回blob的Promise；blob(Binary Large Object)是一個二進制類型的對象，記錄了原始數(shù)據(jù)信息。
URL.createObjectURL(blob)該方法的返回值可以理解為一個指向傳入?yún)?shù)對象的url可以通過該url訪問參數(shù)傳入的對象。

// 將url轉(zhuǎn)成blob地址
fetch(url)
    .then(res => res.blob())
    .then(blob => {
        const a = document.createElement('a');
        // 將鏈接地址字符內(nèi)容轉(zhuǎn)變成blob地址
        a.href = URL.createObjectURL(blob);
        a.download = filename; // 下載文件的名字
        document.body.appendChild(a);
        a.click();
        // 下載完成后 清除占用的緩存資源
        window.URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
    });

該方法需要注意的是，即便傳入同一個對象作為參數(shù)，每次返回的url對象都是不同的。
該url對象保存在內(nèi)存中，只有在當前文檔(document)被卸載時才會被清除，因此為了更好的性能，需要通過URL.revokeObjectURL(blobUrl)主動釋放。

XMLHttpRequest

XMLHttpRequest（‌簡稱XHR）‌是一個用于創(chuàng)建服務(wù)器之間通信的Web API。‌在下載文件時，‌可以通過設(shè)置responseType為blob來接收二進制數(shù)據(jù)。‌這種方法適用于需要從服務(wù)器獲取文件流并進行下載的場景。‌與Blob類似，‌XHR也可以用于動態(tài)生成文件并觸發(fā)下載，‌但它在處理異步請求和數(shù)據(jù)傳輸方面提供了更多的靈活性。‌

可通過xhr.setRequestHeader設(shè)置請求頭參數(shù)。
可通過xhr.getResponseHeader(‘content-disposition’)獲取頭部參數(shù)。

let xhr = new XMLHttpRequest();
// GET請求，downloadURL請求路徑url，async(是否異步)
xhr.open('GET', downloadURL, true);
// 設(shè)置請求頭參數(shù)的方式,如果沒有可忽略此行代碼
xhr.setRequestHeader("Token", 'Bearer ' + getStorage().token); // token
// 設(shè)置響應(yīng)類型為 blob
xhr.responseType = 'blob';
// 關(guān)鍵部分
xhr.onload = function () {
    //如果請求執(zhí)行成功
    if (this.status === 200) {
        // 下載文件
        const blob = new Blob(this.response);
        const href = window.URL.createObjectURL(blob); // 創(chuàng)建下載的鏈接
        const a = document.createElement('a');
        a.href = href;
        a.download = fileName; // 下載文件名
        document.body.appendChild(a);
        a.click(); // 點擊下載
        document.body.removeChild(a); // 下載完成移除元素
        window.URL.revokeObjectURL(href); // 釋放掉blob對象
        
        // 可通過xhr.getResponseHeader('content-disposition')頭部參數(shù)，文件名等
        // let headerParams = xhr.getResponseHeader('content-disposition')?.split(";") || [];
    }
};
// 發(fā)送請求
xhr.send();
xhr.onreadystatechange = function () { 
    if (xhr.readyState === 4 && xhr.status === 200) { 
        // 成功后操作 
    } 
};

axios請求方式

axios({
    method: method ||'post',
    url,
    responseType: 'blob',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
        // 可在此處添加請求參數(shù)
        token: 'token值'
    }
    data: JSON.stringify(params)
}).then(res => {
    if (res) {
        const blob = new Blob(res);
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = href;
        a.download = fileName; // 下載文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link); // 下載完成移除元素
        window.URL.revokeObjectURL(url); // 釋放掉blob對象
    } else {
        message.error('下載失敗')
        return;
    }
})

無論是通過fetch、XMLHttpRequest、axios請求，處理邏輯都是請求成功后，拿到相應(yīng)的response，這個response就是我們要下載的內(nèi)容，通過將它轉(zhuǎn)成blob對象，通過URL.createObjectURL創(chuàng)建下載URL，通過a標簽實現(xiàn)下載。