前端文件導(dǎo)出設(shè)置responseType為blob時遇到的問題及解決
一、當(dāng)我們前端調(diào)用導(dǎo)出文件接口時，一般情況都會在請求里添加responseType為blob
前幾天遇到一個問題，后端人員 的這個接口會分別出現(xiàn)兩種情況：
1、當(dāng)導(dǎo)出接口請求正常時，我們前端會收到一個文件流如下圖
這時我們打印一下接口返回的數(shù)據(jù)類型，發(fā)現(xiàn)接口會返回一個blob類型的數(shù)據(jù)，并且blob中屬性type是application/vnd.ms-excel，這就說明我們導(dǎo)出的文件類型是excel格式的。如下圖
BLOB (binary large object)----二進制大對象，是一個可以存儲二進制文件的容器。
說白了blob就是一個二進制的對象，我們可以通過這個blob對象直接讀取文件內(nèi)容，但是這時多次一舉，我們只需要把相應(yīng)的blob對象直接以a標(biāo)簽導(dǎo)出就可以了，如下圖：
2、當(dāng)導(dǎo)出接口數(shù)據(jù)過多后端拋出異常時，如下圖
這時我們在瀏覽器控制臺打印出結(jié)果，返現(xiàn)結(jié)果還是一個blob對象，但是type變成application/json
我們想要得到接口返回的結(jié)果，需要對blob對象進行文件讀取，我們需要用到 FileReader
FileReader 對象允許 Web 應(yīng)用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。
我們可以根據(jù)blob對象的type屬性來判斷,當(dāng)type為application/json時，接口返回的時一個json對象
其中reader.result就是接口返回的結(jié)果，是一個json字符串需要轉(zhuǎn)換成對象。
總結(jié)
到此這篇關(guān)于前端文件導(dǎo)出設(shè)置responseType為blob時遇到的問題及解決的文章就介紹到這了,更多相關(guān)前端文件導(dǎo)出responseType為blob內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
通過vue-router懶加載解決首次加載時資源過多導(dǎo)致的速度緩慢問題
這篇文章主要介紹了vue-router懶加載解決首次加載時資源過多導(dǎo)致的速度緩慢問題,文中單獨給大家介紹了vue router路由懶加載問題，需要的朋友可以參考下2018-04-04
這篇文章主要為大家介紹了Vue編譯器解析compile源碼解析示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
數(shù)組去重是我面試時候經(jīng)常會問到應(yīng)聘者的一個問題,所以下面這篇文章主要給大家介紹了關(guān)于前端vue數(shù)組去重的三種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-06-06
springboot?vue接口測試前端動態(tài)增刪表單功能實現(xiàn)
這篇文章主要為大家介紹了springboot?vue接口測試前端動態(tài)增刪表單功能實現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
這篇文章主要介紹了Vue之封裝公用變量以及實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue3中的defineExpose使用,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
今天小編就為大家分享一篇Vue 菜單欄點擊切換單個class(高亮)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了淺談Vue頁面級緩存解決方案feb-alive(下),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue實現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的方法
這篇文章主要介紹了Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu),本期介紹添加、修改等功能也比較簡單,可以通過element-ui的$prompt彈框控件來實現(xiàn),需要的朋友可以參考下2024-01-01