前言
項目中經常會遇到需要導出列表內容，或者下載文件之類的需求。結合各種情況，我總結了前端最常用的三種方法來接受后端傳過來的文件流並下載，針對不同的情況可以使用不同的方法。
方法一
使用場景
針對后端的get請求
具體實現
直接用個<a>標簽來接受后端的文件流
<a href="后端文件下載接口地址" >下載文件</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之類的，那就要另當別論了。
this.$axios.post("/api/xxx/xxx/xxx",this.$qs.stringify({range:0,}),{responseType:'blob'}).then(msg=>{
console.log(msg.data) //打印出來是blob對象，已經不是亂碼了
let url = window.URL.createObjectURL(msg.data); //表示一個指定的file對象或Blob對象
console.log(url,"看一下這是啥")
let a = document.createElement("a");
document.body.appendChild(a);
let fileName=msg.headers["content-disposition"].split(";")[1].split("=")[1]; //filename名稱截取
a.href = url;
a.download = fileName; //命名下載名稱
a.click(); //點擊觸發下載
window.URL.revokeObjectURL(url); //下載完成進行釋放
})
特別注意：
在和后台交互的時候，如果后台返回給我們的是二進制流數據，我們就要在發送的時候加上{responseType:'blob'}這行代碼，這樣返回給我們的就不是亂碼了。
---------------------
原文：https://blog.csdn.net/qq_34733308/article/details/84135648