一、文件和流的關(guān)系

文件（File）和流(Stream)是既有區(qū)別又有聯(lián)系的兩個(gè)概念。

文件 是計(jì)算機(jī)管理數(shù)據(jù)的基本單位，同時(shí)也是應(yīng)用程序保存和讀取數(shù)據(jù)的一個(gè)重要場(chǎng)所。
? ? ? 存儲(chǔ)介質(zhì)：文件是指在各種存儲(chǔ)介質(zhì)上（如硬盤、可移動(dòng)磁盤、CD等）永久存儲(chǔ)的數(shù)據(jù)? ? ? ? 的有序集合，它是進(jìn)行數(shù)據(jù)讀寫操作的基本對(duì)象。
? ? ?特性：每個(gè)文件都有文件名、文件所在路徑、創(chuàng)建時(shí)間及訪問(wèn)僅限等屬性。

流 是字節(jié)序列的抽象概念，例如文件、輸入/輸出設(shè)備、內(nèi)部進(jìn)程通信管道等。流提供一種? ? ? ? ?向后備存儲(chǔ)器寫入字節(jié)和從后備存儲(chǔ)器讀取字節(jié)的方式。
? ? 存儲(chǔ)介質(zhì)：除了和磁盤文件直接相關(guān)的文件流以外，流還有多種類型。流可以分布在網(wǎng)絡(luò)? ? ? 中、內(nèi)存中或者是磁帶中。

?上圖類似于亂碼，就是文件流在瀏覽器中的表現(xiàn)形式。

二、前端處理文件流并下載（Vue）

await this.$http
        .request({
          url: `/minioDownload?htitle=${title}`, //這里是你的請(qǐng)求url
          responseType: 'blob', //這里最重要,不要去掉
          method: 'get', //請(qǐng)求方式,看后臺(tái)的需求,可能是get,post等方式
        })
        .then((res) => {
          console.log(res);
          var elink = document.createElement('a');
          elink.download = name;
          elink.style.display = 'none';
          var blob = new Blob([res], { type: 'application/x-msdownload' });
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          document.body.removeChild(elink);
          this.$message.success(`文件下載成功！`)
        }).catch(err => {
            console.log(err);
        });

設(shè)置Content-Type 的值為：application/x-msdownload。Web 服務(wù)器需要告訴瀏覽器其所輸出的內(nèi)容的類型不是普通的文本文件或 HTML 文件，而是一個(gè)要保存到本地的下載文件。

三、解決下載后打開(kāi)顯示不支持此文件格式

這個(gè)問(wèn)題我也遇到了，在網(wǎng)上也搜了好多資料，才得到答案。

比如：

是因?yàn)樵?axios 中對(duì)后端的響應(yīng)做了攔截，所以new Blob([res])中拿到的res實(shí)際上是后端接口的??res.data，只不過(guò)這一層操作在全局被封裝了。

而如果直接使用的$http.get().then()，并未在全局對(duì)請(qǐng)求進(jìn)行封裝攔截。所以在這里需要取得的是? ?res.data? ? 于是，我把new Blob([res])改成new Blob([res.data])后，問(wèn)題就解決了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-494314.html

到了這里，關(guān)于后端返回文件流時(shí)，前端如何處理并成功下載流文件以及解決下載后打開(kāi)顯示不支持此文件格式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！