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)文章
element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼
本文主要介紹了element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了Vue中computed和watch有哪些區(qū)別，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用
本文主要介紹了Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）
vue項(xiàng)目中點(diǎn)擊router-link標(biāo)簽鏈接都屬于聲明式導(dǎo)航。vue項(xiàng)目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）2022-12-12
這篇文章主要介紹了vue3.0中的keep-alive使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue報(bào)錯(cuò)"vue-cli-service‘不是內(nèi)部或外部命令,也不是...”的解決辦法
這篇文章主要介紹了vue報(bào)錯(cuò)"vue-cli-service‘不是內(nèi)部或外部命令，也不是...”的解決辦法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了關(guān)于vite proxy跨域問題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中props組件和slot標(biāo)簽的區(qū)別
props?和?slot?在?Vue?中的作用略有不同，props?更多地用于父子組件之間的數(shù)據(jù)傳遞，而?slot?則更多地用于組件的復(fù)用和擴(kuò)展。感興趣的同學(xué)可以參考閱讀2023-04-04
elementplus?中?DatePicker?日期選擇器樣式修改無效的問題及解決方案
這篇文章主要介紹了elementplus中DatePicker日期選擇器樣式修改無效的問題,DatePicker日期選擇器彈出面板默認(rèn)掛載在body上,所以在組件中添加了?scoped?屬性的?style?標(biāo)簽下是修改不到其樣式的,講解了datepicker的使用方法,及常見的配置項(xiàng)和對(duì)應(yīng)的值,需要的朋友可以參考下2024-01-01
使用idea創(chuàng)建vue項(xiàng)目的圖文教程
Vue.js是一套構(gòu)建用戶界面的框架,只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫(kù)或既有項(xiàng)目整合,下面這篇文章主要給大家介紹了關(guān)于使用idea創(chuàng)建vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-08-08