vue實(shí)現(xiàn)文件流形式的導(dǎo)出下載全過(guò)程
Vue項(xiàng)目中下載返回的文件流操作步驟
1、使用 Axios 請(qǐng)求文件流數(shù)據(jù)；
2、設(shè)置響應(yīng)類(lèi)型為 ‘blob’；
3、創(chuàng)建下載鏈接并觸發(fā)下載。
其中，最關(guān)鍵的一步是創(chuàng)建一個(gè) Blob 對(duì)象并使用 URL.createObjectURL 方法生成一個(gè)下載鏈接。
以下將詳細(xì)說(shuō)明如何實(shí)現(xiàn)。
一、使用 Axios 請(qǐng)求文件流數(shù)據(jù)
在 Vue 項(xiàng)目中，需要使用 Axios 來(lái)發(fā)送請(qǐng)求并獲取文件流數(shù)據(jù)。
可以在組件中使用 Axios 進(jìn)行 HTTP 請(qǐng)求，確保在請(qǐng)求頭中設(shè)置適當(dāng)?shù)捻憫?yīng)類(lèi)型。
import axios from 'axios';
export default {
methods: {
downloadFile() {
axios({
method: 'get',
url: 'your-file-endpoint', // 替換為實(shí)際的文件流接口
params:{},
responseType: 'blob'
})
.then(response => {
this.handleFileDownload(response.data);
})
.catch(error => {
console.error('Error downloading the file', error);
});
}
}
};
二、設(shè)置響應(yīng)類(lèi)型為 ‘blob’
在 Axios 請(qǐng)求中，設(shè)置 responseType 為 ‘blob’，這樣 Axios 會(huì)將響應(yīng)數(shù)據(jù)處理為 Blob 對(duì)象。
Blob 對(duì)象表示一個(gè)不可變的、原始數(shù)據(jù)的類(lèi)文件對(duì)象。
三、創(chuàng)建下載鏈接并觸發(fā)下載
為了觸發(fā)文件下載，需要?jiǎng)?chuàng)建一個(gè) URL 鏈接并模擬點(diǎn)擊事件。
可以在組件中添加一個(gè)方法來(lái)處理 Blob 數(shù)據(jù)并進(jìn)行下載。
methods: {
/**
* 拿到文件流后的下載的方法
* @param {*} data
* @param {*} filename
* @param {*} mime
* @param {*} bom
*/
function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, filename);
} else {
const blobURL = window.URL.createObjectURL(blob);
const tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', filename);
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(tempLink);
tempLink.click();
// 移除 a 標(biāo)簽
document.body.removeChild(tempLink);
// 釋放 URL 對(duì)象
window.URL.revokeObjectURL(blobURL);
}
}
}
四、在 Vue 組件中集成下載功能
<template>
<div>
<button @click="downloadFile">Download File</button>
</div>
</template>
<script lang="ts" setup>
// 下載
async function downloadFile() {
try {
axios({
method: 'get',
url: 'your-file-endpoint', // 替換為實(shí)際的文件流接口
params: {}, // 請(qǐng)求參數(shù)
responseType: 'blob'
}).then(
(response) => {
console.log('downloadByData',response)
if(response.headers['content-disposition']) {
let fileName = response.headers['content-disposition'].split('filename=')[1];
// console.log('filename',fileName)
fileName = fileName.replace(/"/g, '');
downloadByData(response.data,fileName)
} else {
downloadByData(response.data,'xiazai.xlsx')
}
}
)
} catch (e) {
console.log(e);
}
}
/**
* 拿到文件流后的下載的方法
* @param {*} data
* @param {*} filename
* @param {*} mime
* @param {*} bom
*/
function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, filename);
} else {
const blobURL = window.URL.createObjectURL(blob);
const tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', filename);
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
window.URL.revokeObjectURL(blobURL);
}
}
</script>
五、解釋與實(shí)例說(shuō)明
1、使用 Axios 請(qǐng)求文件流數(shù)據(jù)
Axios 是一個(gè)基于 Promise 的 HTTP 客戶(hù)端，可以用于瀏覽器和 Node.js。
在發(fā)送請(qǐng)求時(shí)，通過(guò)設(shè)置 responseType 為 ‘blob’ 來(lái)確保返回的數(shù)據(jù)是二進(jìn)制流格式。
2、設(shè)置響應(yīng)類(lèi)型為‘blob’
Blob 對(duì)象表示一個(gè)不可變的、原始數(shù)據(jù)的類(lèi)文件對(duì)象，可以表示數(shù)據(jù)，比如二進(jìn)制數(shù)據(jù)。
在請(qǐng)求中指定 responseType 為 ‘blob’，可以確保 Axios 將響應(yīng)數(shù)據(jù)處理為 Blob 對(duì)象。
3、創(chuàng)建下載鏈接并觸發(fā)下載
Blob 對(duì)象可以通過(guò) URL.createObjectURL 方法生成一個(gè)臨時(shí)的 URL，用于表示該 Blob 對(duì)象。
創(chuàng)建一個(gè) a 標(biāo)簽，并設(shè)置其 href 屬性為生成的 URL，download 屬性為文件名。
通過(guò) JavaScript 觸發(fā)點(diǎn)擊事件來(lái)啟動(dòng)下載，然后移除 a 標(biāo)簽并釋放生成的 URL。
4、下載文件，文件名獲取不到
二進(jìn)制流下載文件，從response header里面獲取文件名，后端也設(shè)置了header【Content-Disposition】的值為【attachment;filename=MY_DOCUMENT_23.pdf】
network查看請(qǐng)求，response header的確是有值，但是axios獲取header的值，永遠(yuǎn)只有content-type
這個(gè)請(qǐng)求是跨域請(qǐng)求
服務(wù)端加一個(gè)額外的響應(yīng)頭
【Access-Control-Expose-Headers】值為【Content-Disposition】
設(shè)置了這個(gè)響應(yīng)頭后，axios就可以獲取到content-disposition響應(yīng)頭，也就能夠拿到這個(gè)附件名字
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue-基本標(biāo)簽和自定義控件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
uni-app中使用ECharts配置四種不同的圖表(示例詳解)
在uni-app中集成ECharts可以為我們的應(yīng)用提供強(qiáng)大的圖表功能,我們?cè)敿?xì)說(shuō)一下如何在uni-app中使用ECharts,并配置四種不同的圖表,感興趣的朋友跟隨小編一起看看吧2024-01-01
這篇文章主要介紹了Vue3?中的ref與props屬性知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-04-04
這篇文章主要介紹了vue?點(diǎn)擊刪除常用方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue獲取input輸入值的問(wèn)題解決辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家掌握這樣的問(wèn)題，需要的朋友可以參考下2017-10-10
vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間
這篇文章主要介紹了vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vm.$attrs使用場(chǎng)景詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue使用localStorage保存登錄信息 適用于移動(dòng)端、PC端
這篇文章主要為大家詳細(xì)介紹了vue使用localStorage保存登錄信息 適用于移動(dòng)端、PC端，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
vue使用pdf-dist實(shí)現(xiàn)pdf預(yù)覽以及水印添加
這篇文章主要為大家詳細(xì)介紹了vue如何使用pdf-dist實(shí)現(xiàn)pdf預(yù)覽以及水印添加的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
Vue項(xiàng)目webpack打包部署到服務(wù)器的實(shí)例詳解
這篇文章主要介紹了Vue項(xiàng)目webpack打包部署到服務(wù)器的實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07