Vue3文件下載方法實現(xiàn)的簡單代碼
更新時間：2024年10月17日 10:46:04 作者：BasicLab基礎架構(gòu)實驗室
在Web開發(fā)中,文件下載可通過多種方式實現(xiàn),下面這篇文章主要介紹了Vue3文件下載方法實現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
文件下載方式
1. window.location.href 方式
注意：
文件名稱為中文時要使用 encodeURI 轉(zhuǎn)碼；
下載文件格式為 圖片 或 txt 時文件會直接打開；
下文中${ url } 表示接口地址
根據(jù)文件名下載：
window.location.href = `${url}/文件名.xlsx`;
文件名有中文：
window.location.href = `${url}/${encodeURI("文件名.xlsx")}`;
根據(jù)接口及參數(shù)下載（文件名未知）：
window.location.href = `${url}?flag=1&id=${id}`;
當參數(shù)較多時：
import Qs from 'qs'
let params = {
id:1,
name:'張三'
}
let paramStr = Qs.stringify(params);
window.location.href = `${url}?${paramStr}`
2. 后臺返回文件流，模擬a 鏈接下載
this.$axios.get(${url}/${fileName}`, {
responseType: "blob",
}).then((response) => {
//new Blob([res])中不加data就會返回下圖中[objece objece]內(nèi)容（少取一層）
const blob = new Blob([response.data]);
const elink = document.createElement('a');
elink.download = '文件名.xlsx';
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 釋放URL 對象
document.body.removeChild(elink);
}).catch((error) => {
this.$message({
message: error
});
});總結(jié)
到此這篇關(guān)于Vue3文件下載方法實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3文件下載方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇vue 使某個組件不被 keep-alive 緩存的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何動態(tài)獲取當前時間問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
VUE3刷新頁面報錯問題解決:Uncaught?SyntaxError:Unexpected?token?&apo
這篇文章主要介紹了VUE3刷新頁面報錯：Uncaught?SyntaxError:?Unexpected?token?‘＜‘,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue中eventbus被多次觸發(fā)以及踩過的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
本文主要介紹了Vue實現(xiàn)前后端完全分離的項目實戰(zhàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
本文主要介紹了vue實現(xiàn)聊天框自動滾動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
Vux+Axios攔截器增加loading的問題及實現(xiàn)方法
這篇文章主要介紹了Vux+Axios攔截器增加loading的問題及實現(xiàn)方法，文中通過實例代碼介紹了vue中使用axios的相關(guān)知識,需要的朋友可以參考下2018-11-11
Vue2?this?能夠直接獲取到?data?和?methods?的原理分析
這篇文章主要介紹了Vue2?this能夠直接獲取到data和methods的原理分析，因為methods里的方法通過bind指定了this為new?Vue的實例2022-06-06
這篇文章主要為大家詳細介紹了vue+ts實現(xiàn)元素鼠標拖動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應用
本篇文章主要介紹了詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應用 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06