一、當(dāng)我們前端調(diào)用導(dǎo)出文件接口時(shí)，一般情況都會(huì)在請(qǐng)求里添加responseType為blob

前幾天遇到一個(gè)問(wèn)題，后端人員 的這個(gè)接口會(huì)分別出現(xiàn)兩種情況：

1、當(dāng)導(dǎo)出接口請(qǐng)求正常時(shí)，我們前端會(huì)收到一個(gè)文件流如下圖

 這時(shí)我們打印一下接口返回的數(shù)據(jù)類(lèi)型，發(fā)現(xiàn)接口會(huì)返回一個(gè)blob類(lèi)型的數(shù)據(jù)，并且blob中屬性type是application/vnd.ms-excel，這就說(shuō)明我們導(dǎo)出的文件類(lèi)型是excel格式的。如下圖 

BLOB (binary large object)----二進(jìn)制大對(duì)象，是一個(gè)可以存儲(chǔ)二進(jìn)制文件的容器。

說(shuō)白了blob就是一個(gè)二進(jìn)制的對(duì)象，我們可以通過(guò)這個(gè)blob對(duì)象直接讀取文件內(nèi)容，但是這時(shí)多次一舉，我們只需要把相應(yīng)的blob對(duì)象直接以a標(biāo)簽導(dǎo)出就可以了，如下圖：

 2、當(dāng)導(dǎo)出接口數(shù)據(jù)過(guò)多后端拋出異常時(shí)，如下圖 

這時(shí)我們?cè)跒g覽器控制臺(tái)打印出結(jié)果，返現(xiàn)結(jié)果還是一個(gè)blob對(duì)象，但是type變成application/json

 我們想要得到接口返回的結(jié)果，需要對(duì)blob對(duì)象進(jìn)行文件讀取，我們需要用到 FileReader

FileReader  對(duì)象允許 Web 應(yīng)用程序異步讀取存儲(chǔ)在用戶(hù)計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。

我們可以根據(jù)blob對(duì)象的type屬性來(lái)判斷,當(dāng)type為application/json時(shí)，接口返回的時(shí)一個(gè)json對(duì)象

其中reader.result就是接口返回的結(jié)果，是一個(gè)json字符串需要轉(zhuǎn)換成對(duì)象。 

總結(jié)

到此這篇關(guān)于前端文件導(dǎo)出設(shè)置responseType為blob時(shí)遇到的問(wèn)題及解決的文章就介紹到這了,更多相關(guān)前端文件導(dǎo)出responseType為blob內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論