更多文章

平時在前端下載文件有兩種方式，一種是后臺提供一個 URL，然后用 window.open(URL) 下載，另一種就是后臺直接返回文件的二進制內容，然后前端轉化一下再下載。

由于第一種方式比較簡單，在此不再敘述。接下來主要講解一下第二種方式怎么實現。

Blob、ajax(axios)

mdn 上是這樣介紹 Blob 的：

Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不一定是JavaScript原生格式的數據

具體使用方法

axios({method: 'post',url: '/export', }) .then(res => {// 假設 data 是返回來的二進制數據const data = res.dataconst url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))const link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', 'excel.xlsx')document.body.appendChild(link)link.click()document.body.removeChild(link) })

打開下載的文件，看看結果是否正確。

一堆亂碼...

一定有哪里不對。

最后發現是參數 responseType 的問題，responseType 它表示服務器響應的數據類型，由于后臺返回來的是二進制數據，所以我們要把它設為 arraybuffer，
接下來再看看結果是否正確。

axios({method: 'post',url: '/export',responseType: 'arraybuffer', }) .then(res => {// 假設 data 是返回來的二進制數據const data = res.dataconst url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))const link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', 'excel.xlsx')document.body.appendChild(link)link.click()document.body.removeChild(link) })

這次沒有問題，文件能正常打開，內容也是正常的，不再是亂碼。

轉載于:https://www.cnblogs.com/woai3c/p/11262491.html

總結

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

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