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