前端接受後端文件流並下載的幾種方法
阿新 • • 發佈:2019-03-21
one head resp per span headers move 文件名 實現
前言
項目中經常會遇到需要導出列表內容,或者下載文件之類的需求。結合各種情況,我總結了前端最常用的三種方法來接受後端傳過來的文件流並下載,針對不同的情況可以使用不同的方法。
方法一
使用場景
針對後端的get
請求
具體實現
<a href="後端文件下載接口地址" >下載文件</a>
直接用個<a>
標簽來接受後端的文件流
方法二
使用場景
針對後端的post
請求
利用原生的XMLHttpRequest
方法實現
具體實現
function request () { const req = new XMLHttpRequest(); req.open(‘POST‘, ‘<接口地址>‘, true); req.responseType = ‘blob‘; req.setRequestHeader(‘Content-Type‘, ‘application/json‘); req.onload = function() { const data = req.response; const a = document.createElement(‘a‘); const blob = new Blob([data]); const blobUrl = window.URL.createObjectURL(blob); download(blobUrl) ; }; req.send(‘<請求參數:json字符串>‘); }; function download(blobUrl) { const a = document.createElement(‘a‘); a.style.display = ‘none‘; a.download = ‘<文件名>‘; a.href = blobUrl; a.click(); document.body.removeChild(a); } request();
方法三
使用場景
針對後端的post
請求
利用原生的fetch
方法實現
具體實現
function request() { fetch(‘<接口地址>‘, { method: ‘POST‘, headers: { ‘Content-Type‘: ‘application/json‘, }, body: ‘<請求參數:json字符串>‘, }) .then(res => res.blob()) .then(data => { let blobUrl = window.URL.createObjectURL(data); download(blobUrl); }); } function download(blobUrl) { const a = document.createElement(‘a‘); a.style.display = ‘none‘; a.download = ‘<文件名>‘; a.href = blobUrl; a.click(); document.body.removeChild(a); } request();
總結
- 如果後端提供的下載接口是
get
類型,可以直接使用方法一,簡單又便捷;當然如果想使用方法二、三也是可以的,不過感覺有點舍近求遠了。 - 如果後端提供的下載接口是
post
類型,就必須要用方法二或者方法三了。
方法二和方法三怎麽取舍?
- 當你的項目裏的接口請求全是基於
XMLHttpRequest
實現的,這時方法二就更加適合,只要基於你原來項目中的接口請求工具類加以擴展就行了。 - 當你的項目裏的接口請求全是基於
fetch
實現的,這時方法三就更加適合,比如我現在的做的一個項目就是基於ant design pro
的後臺管理系統,它裏面的請求類就是基於fetch
的,所以我就直接用的方法三,只要在它的request.js
文件中稍作修改就行。 - 我這裏討論的是兩種原生的請求方式,如果你項目中引用了第三方請求包來發送請求,比如axios之類的,那就要另當別論了。
轉自:https://www.jianshu.com/p/8ef2c7b8b46c
前端接受後端文件流並下載的幾種方法