欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2024年11月27日 10:36:11   作者:zj靖  
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)文件下載的兩種常用方式,兩種方法均通過(guò)創(chuàng)建臨時(shí)URL并觸發(fā)下載實(shí)現(xiàn),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

項(xiàng)目中前端下載一般分為兩種情況:

  • 后端直接提供一個(gè)文件地址,通過(guò)瀏覽器打開(kāi)就可以下載。
  • 需要發(fā)送請(qǐng)求,后端返回二進(jìn)制流數(shù)據(jù),前端解析流數(shù)據(jù),生成URL實(shí)現(xiàn)下載。

前端對(duì)應(yīng)的實(shí)質(zhì)是a標(biāo)簽和Blob文件下載,這兩者的區(qū)別:

  • a標(biāo)簽:txt、png、jpg、gif等文件,是不提供直接下載,有兼容性問(wèn)題,特別是IE。
  • blob:利用 Blob對(duì)象可以將文件流轉(zhuǎn)化成 Blob二進(jìn)制對(duì)象。該對(duì)象兼容性良好,適用于需要?jiǎng)討B(tài)生成或處理非同源文件的情況。‌通過(guò)URL.createObjectURL()方法將Blob對(duì)象轉(zhuǎn)換為一個(gè)臨時(shí)的URL下載。

blob對(duì)象

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

屬性

  • size:只讀屬性,Blob中的字節(jié)數(shù)。
  • type:只讀屬性,表示Blob存放的媒體類型,圖片、視頻、文本文件等等。
    它的使用方法如下:
const blob = new Blob([], { type: '' });

URL.createObjectURL

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

簡(jiǎn)單說(shuō)這個(gè)方法用來(lái)創(chuàng)建一個(gè)url的,它的作用是把一個(gè)blob對(duì)象轉(zhuǎn)換成一個(gè)url,這個(gè)url可以用來(lái)下載文件,也可以用來(lái)預(yù)覽文件。

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

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

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

這種方式無(wú)法解決瀏覽器可識(shí)別文件直接打開(kāi)的問(wèn)題,但是 HTML5 新屬性 download 屬性會(huì)解決這個(gè)問(wèn)題。

a標(biāo)簽 + download屬性

當(dāng)URL是同源(同域名、同協(xié)議、同端口號(hào))時(shí),這種情況用 a標(biāo)簽加download屬性的方式即可,download屬性指示瀏覽器該下載而不是打開(kāi)該文件,同時(shí)該屬性值即下載時(shí)的文件名;

<a href="path/to/file.jpg" rel="external nofollow"  download='file.jpg'>點(diǎn)擊下載圖片</a>
const a = document.createElement('a'); // 創(chuàng)建a標(biāo)簽
const e = document.createEvent('MouseEvents'); // 創(chuàng)建鼠標(biāo)事件對(duì)象
e.initEvent('click', false, false); // 初始化事件對(duì)象
a.href = url; // 設(shè)置下載地址
a.download = filename || ''; // 設(shè)置下載文件名
a.dispatchEvent(e);

因?yàn)?strong>a標(biāo)簽下載只能下載同源的文件,如果是跨域的文件,這里包括圖片、音視頻等媒體文件,都是預(yù)覽,也無(wú)法下載

fetch發(fā)送請(qǐng)求

  • 通過(guò)原生fetch請(qǐng)求,動(dòng)態(tài)生成一個(gè)a標(biāo)簽實(shí)現(xiàn)文件下載。
  • res.blob()該方法是Fetch API的response對(duì)象方法,該方法將后端返回的文件流轉(zhuǎn)換為返回blob的Promise;blob(Binary Large Object)是一個(gè)二進(jìn)制類型的對(duì)象,記錄了原始數(shù)據(jù)信息。
  • URL.createObjectURL(blob)該方法的返回值可以理解為一個(gè)指向傳入?yún)?shù)對(duì)象的url可以通過(guò)該url訪問(wèn)參數(shù)傳入的對(duì)象。
// 將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);
    });
  • 該方法需要注意的是,即便傳入同一個(gè)對(duì)象作為參數(shù),每次返回的url對(duì)象都是不同的。
  • 該url對(duì)象保存在內(nèi)存中,只有在當(dāng)前文檔(document)被卸載時(shí)才會(huì)被清除,因此為了更好的性能,需要通過(guò)URL.revokeObjectURL(blobUrl)主動(dòng)釋放。

XMLHttpRequest

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

  • 可通過(guò)xhr.setRequestHeader設(shè)置請(qǐng)求頭參數(shù)。
  • 可通過(guò)xhr.getResponseHeader(‘content-disposition’)獲取頭部參數(shù)。
let xhr = new XMLHttpRequest();
// GET請(qǐng)求,downloadURL請(qǐng)求路徑url,async(是否異步)
xhr.open('GET', downloadURL, true);
// 設(shè)置請(qǐng)求頭參數(shù)的方式,如果沒(méi)有可忽略此行代碼
xhr.setRequestHeader("Token", 'Bearer ' + getStorage().token); // token
// 設(shè)置響應(yīng)類型為 blob
xhr.responseType = 'blob';
// 關(guān)鍵部分
xhr.onload = function () {
    //如果請(qǐng)求執(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(); // 點(diǎn)擊下載
        document.body.removeChild(a); // 下載完成移除元素
        window.URL.revokeObjectURL(href); // 釋放掉blob對(duì)象
        
        // 可通過(guò)xhr.getResponseHeader('content-disposition')頭部參數(shù),文件名等
        // let headerParams = xhr.getResponseHeader('content-disposition')?.split(";") || [];
    }
};
// 發(fā)送請(qǐng)求
xhr.send();
xhr.onreadystatechange = function () { 
    if (xhr.readyState === 4 && xhr.status === 200) { 
        // 成功后操作 
    } 
};

axios請(qǐng)求方式

axios({
    method: method ||'post',
    url,
    responseType: 'blob',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
        // 可在此處添加請(qǐng)求參數(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對(duì)象
    } else {
        message.error('下載失敗')
        return;
    }
})

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

總結(jié)

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

相關(guān)文章

最新評(píng)論