vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式
更新時(shí)間：2023年10月24日 09:13:37 作者：橘哥哥
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式,具有很的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue點(diǎn)擊按鈕下載文件
方法一
當(dāng)后端直接返回文件下載路徑給你時(shí)
項(xiàng)目中需要用到文件下載功能，查了資料發(fā)現(xiàn)需要用到a標(biāo)簽的特性，但是這邊需要用到點(diǎn)擊按鈕下載，懶得寫(xiě)樣式
于是用了以下代碼：
<div class="btns">
<el-button size="mini" type="primary" @click="$router.push(`/portal/${item.id}/detail`)">查看軟件</el-button>
<el-link target="_blank" :href="item.sourceUrl | filterUrl" rel="external nofollow" :underline="false" style="margin-left:15px">
<el-button size="mini" type="warning">軟件下載</el-button>
</el-link>
</div>
在el-button的外面套了一層el-link，
如下圖，可以正常下載
以下是el-link文字鏈接的屬性
新增方法二
當(dāng)后端返回文件UID給你是時(shí)
有時(shí)候，后端接口返回的是文件的uid，需要調(diào)用接口獲取文件的相關(guān)信息
返回值如下圖
此處如果用第一種方法肯定不行，于是做如下處理
handLoad(uid){ //handload可以綁到下載按鈕上,點(diǎn)擊按鈕時(shí)調(diào)用此方法
//此方法根據(jù)自己項(xiàng)目來(lái)的,getFileInfoByUid是項(xiàng)目接口,根據(jù)項(xiàng)目自行調(diào)整
getFileInfoByUid(uid).then(res=>{
//res就是上圖的返回值,然后調(diào)用下面的download方法
this.download(res.name,res.originalPath)
})
},
download(name,url){
const ele = document.createElement('a');
ele.setAttribute('href', this.$options.filters['filterUrl'](url));
//this.$options.filters['filterUrl']是調(diào)用全局過(guò)濾器,filterUrl是你自己項(xiàng)目main.js里面定義的過(guò)濾器
ele.setAttribute('download',name);
ele.style.display = 'none';
document.body.appendChild(ele);
ele.click();
document.body.removeChild(ele);
},
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹的是vue2 vue3中使用Echarts的相關(guān)資料，下面文章 會(huì)詳細(xì)介紹該內(nèi)容，感興趣的小伙伴不要錯(cuò)過(guò)喲2021-09-09
vue實(shí)現(xiàn)指定區(qū)域自由拖拽、打印功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定區(qū)域自由拖拽、打印功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue3項(xiàng)目中配置TypeScript和JavaScript的兼容
在Vue3開(kāi)發(fā)中,常見(jiàn)的使用JavaScript（JS）編寫(xiě)代碼,但也會(huì)有調(diào)整編寫(xiě)語(yǔ)言使用TypeScript（TS）的需求,因此,在Vue3項(xiàng)目設(shè)置中兼容TS和JS是刻不容緩的重要任務(wù),2023-08-08
在項(xiàng)目開(kāi)發(fā)中,經(jīng)常會(huì)用到svg圖標(biāo),之前用的都是vue-svg-icon,接下來(lái)通過(guò)本文給大家介紹Vue中使用SVG-ICON的配置方法,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了vue的hash值原理也是table切換,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
vue3 element-plus如何使用icon圖標(biāo)組件
這篇文章主要介紹了vue3 element-plus如何使用icon圖標(biāo)組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
element-ui復(fù)雜table表格動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行以及列順序詳解
這篇文章主要給大家介紹了關(guān)于element-ui復(fù)雜table表格動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行以及列順序的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue?click事件傳遞參數(shù)--方法/教程/實(shí)例,本文用示例介紹Vue中事件傳參的方法，采用click這個(gè)事件進(jìn)行展示，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
Vue中的nextTick作用和幾個(gè)簡(jiǎn)單的使用場(chǎng)景
這篇文章主要介紹了Vue中的nextTick作用和幾個(gè)簡(jiǎn)單的使用場(chǎng)景，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
講解vue-router之什么是動(dòng)態(tài)路由
這篇文章主要介紹了講解vue-router之什么是動(dòng)態(tài)路由，詳細(xì)的介紹了什么是動(dòng)態(tài)路由，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05