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