Vue如何實(shí)現(xiàn)從response讀取流下載
更新時間：2025年04月11日 15:45:09 作者：自不惘
這篇文章主要介紹了Vue如何實(shí)現(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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3簡易實(shí)現(xiàn)proxy代理實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Python實(shí)現(xiàn)學(xué)生成績管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了VUE-ElementUI?時間區(qū)間選擇器的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
React和Vue在響應(yīng)式機(jī)制上各有特點(diǎn)：Vue通過Proxy或Object.defineProperty自動追蹤依賴,支持細(xì)粒度更新；React基于不可變數(shù)據(jù),通過setState顯式觸發(fā)更新,依賴虛擬DOM的Diff算法批量更新,Vue強(qiáng)調(diào)聲明式和自動優(yōu)化,React強(qiáng)調(diào)函數(shù)式編程和顯式控制2025-02-02
這篇文章主要給大家介紹了關(guān)于多個vue子路由文件自動化合并的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue3?內(nèi)容過多出現(xiàn)滾動條時滾動條自動定位到末端的操作代碼
這篇文章主要介紹了vue3?內(nèi)容過多出現(xiàn)滾動條時滾動條自動定位到末端的操作代碼,本文給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-05-05
vue-cli的index.html中使用環(huán)境變量方式
這篇文章主要介紹了vue-cli的index.html中使用環(huán)境變量方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
關(guān)于vue.js彈窗組件的知識點(diǎn)總結(jié)
最近在開發(fā)過程對對于組件化的開發(fā)有一些感想，于是開始記錄下這些。彈窗組件一直是 web 開發(fā)中必備的，使用頻率相當(dāng)高，最常見的莫過于 alert，confirm和prompt這些,不同的組件庫對于彈窗的處理也是不一樣的，下面來一起看看吧。2016-09-09
最近開發(fā)了一個功能,頁面首頁會加載大量的圖片,初次進(jìn)入頁面時,會導(dǎo)致頁面性能下降,于是乎,我改進(jìn)了這個功能,可以讓所有圖片自動懶加載,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06