當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue 后端返回二进制流文件，前端如何实现下载？

發布時間：2023/12/2 vue 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue 后端返回二进制流文件，前端如何实现下载？小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. axios 請求二進制流文件導出文件

1.1 后臺返回的二進制流：?

1.2 使用：

1.3 需要注意以下幾點：

2. 關于 arraybuffer 和 blob

2.1?ArrayBuffer 和?blob

2.2 區別

2.3?相互轉換

3. 主要參考：?

1. axios 請求二進制流文件導出文件

? 下載的時候需要傳請求頭時，普通的 window.location.href=url、window.open(url) 就不適用了。通過 axios 設置服務器響應的數據類型，可以下載后臺返回的二進制流文件。

`responseType` 表示服務器響應的數據類型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

1.1 后臺返回的二進制流：?

因為我這里用到的比較多，所在封裝在的公共函數中：

1.2 使用：

<el-button type="primary" plain size="mini" icon="el-icon-download" @click="exportFile">導出</el-button>methods:{//導出exportFile(){exportExcel("/api/warehouse/exportDetailsWarehouse", this.searchForm); //本地測試} }

1.3 需要注意以下幾點：

res 的返回值，很多人封裝 axios 時直接返回了res.data，上面代碼中的 res.data 改為 res 就好了。 let blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'}); 但是如果后臺在接口里面返回了文件名，是獲取不到的，因為只能獲取到 res.data 的內容。

本地調試時，做好跨域代理，否則會報跨域問題。

post 請求可能會失敗。

? ? 以上是我在做這個需求時碰到的問題，有的人可能在項目中安裝了?mockjs，導致下載失敗，參考：

vue axios(下載文件流)設置返回值類型responseType:'blob'無效的問題_kk無敵怕的博客-CSDN博客_axios設置responsetype

2. 關于 arraybuffer 和 blob

? ? 在參考博客時，發現對于 responseType 有的是填“blob”，有的是 “arraybuffer”，因此去了解了一下這兩個的區別。

2.1?ArrayBuffer 和?blob

ArrayBuffer?對象用來表示通用的、固定長度的原始二進制數據緩沖區。
它是一個字節數組，通常在其他語言中稱為“byte array”。
你不能直接操作 ArrayBuffer 的內容，而是要通過類型數組對象或 DataView 對象來操作，它們會將緩沖區中的數據表示為特定的格式，并通過這些格式來讀寫緩沖區的內容。

Blob?對象表示一個不可變、原始數據的類文件對象。它的數據可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用于數據操作。
Blob 表示的不一定是JavaScript原生格式的數據。File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統上的文件。
要從其他非blob對象和數據構造一個 Blob，使用 Blob() 構造函數。要創建一個 blob 數據的子集 blob，使用 slice() 方法。

2.2 區別

ArrayBuffer對象用來表示通用的、固定長度的原始二進制數據緩沖區。
Blob (binary large object)，他表示一個不可變、原始數據的類文件對象，
blob類型只有slice方法，用于返回一個新的 Blob對象，包含了源 Blob對象中指定范圍內的數據。
對比發現，ArrayBuffer的數據，是可以按照字節去操作的，而Blob的只能作為一個整的對象去處理。
所以說，ArrayBuffer相比Blob更接近真實的二進制，更底層。

? ? ArrayBuffer 和 Blob一樣，都是二進制數據的容器，而ArrayBuffer相比更為底層，他可以去操作去修改這些二進制值，這兩者之間也是可以互轉的。

2.3?相互轉換

// arraybuffer轉blob很方便，作為參數傳入就行了。 var buffer = new ArrayBuffer(16) var blob = new Blob([buffer]) //此處需要借助fileReader對象: var blob = new Blob([1,2,3,4,5]) var reader = new FileReader() reader.onload = function() {console.log(this.result) } reader.readAsArrayBuffer(blob) // 控制臺輸出的則是ArrayBuffer的數據了

? ? ? ? 我這里用的 arraybuffer，改為 “blob” 也能正常下載。

responseType: arraybuffer 請求到的數據 responseTyle:blob 請求到的數據

3. 主要參考：?

前端通過axios請求下載excel文件_qq_31645371的博客-CSDN博客_axios post下載excel當后臺接口有token校驗的時候，通過window.location.href=url，不能攜帶token參數，因而此方法不能正常下載excel文件但是通過axios請求可以實現請求頭中攜帶token參數，具體代碼如下：...https://blog.csdn.net/qq_31645371/article/details/91984217后端返回二進制文件流，前端處理下載 - eightabs - 博客園處理邏輯：獲取返回文件流，通過 Blob 對象構造文件后下載。 function download(data, filename, type="application/vnd.ms-excehttps://www.cnblogs.com/eightabs/p/14079581.html

axios 請求接口獲取文件流數據導出數據到excel,解決亂碼 - 久而久之灬 - 博客園axios.get("URL",{ params:{ data1:data1, data2:data2 }, headers: { 'Content-Type':https://www.cnblogs.com/yaomin/p/10821065.html

window.URL.createObjectURL Blob URL在IE中兼容問題_Yang Yong 的博客-CSDN博客問題描述window.URL.createObjectURL()可以直接生成blob:開頭的鏈接，該鏈接產生于瀏覽器端，不會占用服務器資源。window.URL.createObjectURL()在IE10, IE11以及Microsoft Edge中生成的blob:鏈接，你不能把它加到一個<a>節點上，也不能直接在瀏覽器地址欄打開訪問，并且得到“Error: 拒絕訪問。...https://blog.csdn.net/u014628388/article/details/81738704

前端 ArrayBuffer 與 Blob 互轉_前端挖掘機-CSDN博客_blob轉arraybuffer首先說一點基礎知識：responseType 可選的參數有："text"、"arraybuffer"、"blob" 或 "document"；對應的返回數據為 DOMString、ArrayBuffer、Blob、Document；默認參數為"text"。前端請求二進制數據的時候需要設置數據響應格式：xhr.responseType = "arraybuffer"；寫法如下：...https://blog.csdn.net/weixin_41849462/article/details/103409341?前端實現調用后臺接口下載，arraybuffer和blob - 簡書下載封裝調用接口方法下載函數注：window.URL.createObjectURL URL.createObjectURL() 靜態方法會創建一個 DOMString...https://www.jianshu.com/p/de8b3b76f131

總結

以上是生活随笔為你收集整理的vue 后端返回二进制流文件，前端如何实现下载？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。