Vue如何實現(xiàn)從response讀取流下載
更新時間：2025年04月11日 15:45:09 作者：自不惘
這篇文章主要介紹了Vue如何實現(xiàn)從response讀取流下載問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue從response讀取流下載
1、創(chuàng)建公共方法
/**
* 從response讀取流下載
* @param response 響應(yīng)體
* @param suffix 文件后綴名
*/
function downloadBlob(response,suffix){
let fileName = new Date().getTime()+"_"+suffix+'.xlsx'
let blob = new Blob([response]);//response.data為后端傳的流文件
let url = window.URL.createObjectURL(blob);
let downloadElement = document.createElement("a");
downloadElement.style.display = "none";
downloadElement.href = url;
downloadElement.download = fileName;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(url);
}
export default {
downloadBlob
}2、掛載到Vue原型上
import blob from '@/utils/blob' Vue.prototype.$blob = blob
3、使用
/** 導(dǎo)出按鈕操作 */
handleExport() {
this.$confirm('是否導(dǎo)出所有數(shù)據(jù)?', "警告", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportData();
}).then(response => {
this.$blob.downloadBlob(response,"數(shù)據(jù)表")
}).catch(()=>{})
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue中el-date-picker?type=daterange日期不回顯的問題
這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中mixins的使用方法以及實際項目應(yīng)用指南
vue中提供了一種混合機制--mixins,用來更高效的實現(xiàn)組件內(nèi)容的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于Vue中mixins的使用方法以及實際項目應(yīng)用指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
Vue3使用pdfjs-dist實現(xiàn)PDF文件瀏覽器預(yù)覽功能
本文介紹在Vue3項目中集成pdfjs-dist以實現(xiàn)PDF預(yù)覽功能的過程,包括安裝步驟、創(chuàng)建Vue組件、使用方法及注意事項,涉及PDF文件來源、性能優(yōu)化、錯誤處理、樣式定制、兼容性等問題,并提供了解決方案,需要的朋友可以參考下2026-03-03
這篇文章主要介紹了vue路由組件路徑如何用變量形式動態(tài)引入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)控制商品數(shù)量組件的封裝及使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇vue-resource:jsonp請求百度搜索的接口示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
今天小編就為大家分享一篇Vuejs2 + Webpack框架里,模擬下載的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue element-ul實現(xiàn)展開和收起功能的實例代碼
這篇文章主要介紹了vue element-ul實現(xiàn)展開和收起功能的實例代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
這篇文章主要給大家介紹了基于axios請求封裝的vue應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了Vue下路由History模式打包后頁面空白，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06