??前言
哈嘍小伙伴們，在我們?nèi)粘９ぷ鳟?dāng)中，大家一定會(huì)遇到 文件導(dǎo)出 這樣的功能需求點(diǎn)；導(dǎo)出功能前端后端都可以實(shí)現(xiàn)，通常情況下呢是由我們后端同事去處理的，那么當(dāng)我們后端同事給你返回文件流的時(shí)候，前端要怎么處理并且完成下載呢？今天就給大家說個(gè)簡(jiǎn)單的方法，我們一起來看下吧??
??文件和流的關(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í)間及訪問僅限等屬性。
-
流是字節(jié)序列的抽象概念，例如文件、輸入/輸出設(shè)備、內(nèi)部進(jìn)程通信管道等。流提供一種向后備存儲(chǔ)器寫入字節(jié)和從后備存儲(chǔ)器讀取字節(jié)的方式。存儲(chǔ)介質(zhì)：除了和磁盤文件直接相關(guān)的文件流以外，流還有多種類型。流可以分布在網(wǎng)絡(luò)中、內(nèi)存中或者是磁帶中。
??后端返回來的流是什么樣子的
這里用一張圖片來說明一下
如上圖，紅色框內(nèi)，類似于亂碼的，就是文件流在瀏覽器中的表現(xiàn)方式
??前端處理文件流并且成功下載
這里以Vue為主實(shí)現(xiàn)
在導(dǎo)出接口文件里寫入：
import request from '@/utils/request';
// 車輛運(yùn)行分析導(dǎo)出
export function exportCarRunAnalyse(data) {
return request({
responseType: 'blob', // 重點(diǎn)，responseType設(shè)置為 blob
url: '/statistics/exportCarRunAnalyse',
method: 'post',
data
});
}
調(diào)取該接口的頁面里寫入：
// data 為 向后臺(tái)傳遞的參數(shù)，大家自行定義
exportCarRunAnalyse(data).then(res => {
console.log(res); // 控制臺(tái)輸出：Blob {size: 30208, type: 'application/x-msdownload'}
var debug = res;
if (debug) {
var elink = document.createElement('a');
elink.download = '導(dǎo)出表格.xls';
elink.style.display = 'none';
var blob = new Blob([debug], { type: 'application/x-msdownload' });
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
} else {
this.$message.error('導(dǎo)出異常請(qǐng)聯(lián)系管理員');
}
}).catch(err => {
console.log(err);
});
這時(shí)再去點(diǎn)擊導(dǎo)出，即可將 文件流 下載為文件
??結(jié)語
方法有好多，這只是其中的一種，也歡迎大家補(bǔ)存，共同學(xué)習(xí)。各位小伙伴讓我們 let’s be prepared at all times！文章來源：http://www.zghlxwxcb.cn/news/detail-500898.html
?原創(chuàng)不易，還希望各位大佬支持一下！
?? 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！
?? 收藏，你的青睞是我努力的方向！
?? 評(píng)論，你的意見是我進(jìn)步的財(cái)富！文章來源地址http://www.zghlxwxcb.cn/news/detail-500898.html
到了這里，關(guān)于Vue實(shí)戰(zhàn)【后端返回文件流時(shí)，前端如何處理并成功下載流文件】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
