快捷導(dǎo)航

解決前端接收 type:"application/octet-stream" 格式的數(shù)據(jù)并下載(解決后端返回不唯一問題)

更新時間：2023年12月21日 11:52:22 作者：飛奔的馬鈴貓

前端接收 type: “application/octet-stream“ 格式的數(shù)據(jù)并下載,還有后端既返回octet-stream還返回JSON數(shù)據(jù)時的處理方法,今天給大家分享前端接收 type:"application/octet-stream" 格式的數(shù)據(jù)并下載(解決后端返回不唯一問題)的解決方案,感興趣的朋友一起看看吧

第一步

在 響應(yīng)攔截器中作出初步的判斷

這里判斷if是針對這種情況時做出的應(yīng)對方法，可能還有其他情況，這里只是最簡單的。

service.interceptors.response.use(
 response => {
   // 導(dǎo)出
   const headers = response.headers
   if (headers['content-type'] === 'application/octet-stream;charset=utf-8') {
     return response.data
   }
   ...//這里時其他的情況
 },
 error => {
   return Promise.reject(error)
 }
)

第二步

對api進(jìn)行修改

這是我的axios的寫法，按各自的走就行

第三步

發(fā)起請求，對請求到的數(shù)據(jù)進(jìn)行處理下載

   exportClick () {
         export().then(res => {
           const content = res
           const blob = new Blob([content])
           const fileName = '導(dǎo)出信息.xlsx'
           if ('download' in document.createElement('a')) { // 非IE下載
             const elink = document.createElement('a')//創(chuàng)建一個a標(biāo)簽通過a標(biāo)簽的點(diǎn)擊事件區(qū)下載文件
             elink.download = fileName
             elink.style.display = 'none'
             elink.href = URL.createObjectURL(blob)//使用blob創(chuàng)建一個指向類型數(shù)組的URL
             document.body.appendChild(elink)
             elink.click()
             URL.revokeObjectURL(elink.href) // 釋放URL 對象
             document.body.removeChild(elink)
           } else { // IE10+下載
             navigator.msSaveBlob(blob, fileName)
           }
         })
       }

本來是已經(jīng)寫完這個功能了，但后臺告訴我有可能沒有文件，然后他要給我返回json數(shù)據(jù)格式

我又懵了一會，又查了半天資料，終于是完善好了

當(dāng)返回的數(shù)據(jù)類型既有可能是JSON又可能是octet-stream時

第一步

首先我們不能改變原來的代碼

這一行對于接收文件是必須的，但是這樣又會讓我們的數(shù)據(jù)變成blob類型

上面是有文件時的樣子

這是沒有文件的樣子

可以注意到 blob有 type這個數(shù)據(jù)，我們就可以根據(jù)這個type來判斷進(jìn)行下一步處理

if (res.type == "application/json") {
    ...
}
if (res.type == "application/octet-stream"){
    ...
}

其中是octet-stream類型時的操作我們上面就已經(jīng)寫道了
下面介紹如何轉(zhuǎn)換為json

第二步：將blob轉(zhuǎn)換為json數(shù)據(jù)

這里要先用FilerReader，不可以直接使用JSON.parse

         if (res.type == "application/json") {
           // console.log("type == json");
           const reader = new FileReader(); //通過fileReader將blob類型的數(shù)據(jù)轉(zhuǎn)換成json格式的數(shù)據(jù)
           reader.readAsText(res, "utf-8");
           reader.onload = function () {
             //讀取完成后返回字符串形式的內(nèi)容
             // console.log("reader.result", reader.result);
             const msg = JSON.parse(reader.result);
             console.log("JSON轉(zhuǎn)換結(jié)果", msg);
			  //...這里時對轉(zhuǎn)換后結(jié)果的操作
             }
           };
         }

到這里下載文件的種種問題就解決啦，寫個博客紀(jì)念一下，第一次處理這種問題

轉(zhuǎn)載說明：

借鑒原作者：https://blog.csdn.net/u010598111/article/details/85052865

到此這篇關(guān)于前端接收 type: “application/octet-stream“ 格式的數(shù)據(jù)并下載，解決后端返回不唯一的文章就介紹到這了,更多相關(guān)接收application/octet-stream格式的數(shù)據(jù)并下載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: