前端實(shí)現(xiàn)文件下載的幾種常用方式總結(jié)
項(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è)置responseType
為blob
來(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)文章
IE下Ajax緩存問(wèn)題的快速解決方法(get方式)
IE下Ajax緩存問(wèn)題的快速解決方法(get方式)。網(wǎng)上搜了很多解決方案,一大把,下面是我認(rèn)為比較全面的解決方案。主要分為客戶端解決和服務(wù)端解決2014-01-01JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01JavaScript實(shí)現(xiàn)列出數(shù)組中最長(zhǎng)的連續(xù)數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)列出數(shù)組中最長(zhǎng)的連續(xù)數(shù)的方法及使用,需要的朋友可以參考下2014-12-12ES6記錄異步函數(shù)的執(zhí)行時(shí)間詳解
在這篇文章里,我會(huì)實(shí)現(xiàn)一個(gè)可重用的函數(shù)來(lái)處理 JavaScript 延時(shí)異步操作。有需要的小伙伴們可以參考借鑒,下面來(lái)一起看看。2016-08-08非常不錯(cuò)的一個(gè)JS分頁(yè)效果代碼,值得研究
非常不錯(cuò)的一個(gè)JS分頁(yè)效果代碼,值得研究...2007-06-06Javascript setInterval的兩種調(diào)用方法(實(shí)例講解)
這篇文章主要是對(duì)Javascript setInterval的兩種調(diào)用方法解析了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11JS對(duì)img進(jìn)行操作(換圖片/切圖/輪換/停止)
JS對(duì)img進(jìn)行操作包括:換圖片/切圖/輪換/停止輪換等等,在本文將逐一實(shí)現(xiàn),感興趣的朋友可以參考下哈,希望對(duì)你學(xué)習(xí)js知識(shí)有所幫助2013-04-04微信小程序用戶授權(quán)彈窗 拒絕時(shí)引導(dǎo)用戶重新授權(quán)實(shí)現(xiàn)
我們?cè)陂_(kāi)發(fā)小程序時(shí),如果想獲取用戶信息,就需要獲取用的授權(quán),如果用戶誤點(diǎn)了拒絕授權(quán),我們?cè)趺礃尤フ_的引導(dǎo)用戶重新授權(quán)呢。今天就來(lái)給大家講講如果正確的引導(dǎo)用戶授權(quán),需要的朋友可以參考下2019-07-07Javascript自定義排序 node運(yùn)行 實(shí)例
Javascript自定義排序 node運(yùn)行 實(shí)例,需要的朋友可以參考一下2013-06-06