vue實現點擊按鈕下載文件功能

 更新時間:2019年10月11日 15:44:09   作者:sun shying   我要評論
這篇文章主要介紹了vue中點擊按鈕下載文件,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

在這里插入圖片描述

項目中需要用到文件下載功能,查了資料發現需要用到a標簽的特性,但是這邊需要用到點擊按鈕下載,懶得寫樣式,于是用了以下代碼.

<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" :underline="false" style="margin-left:15px">
    <el-button size="mini" type="warning">軟件下載</el-button>
  </el-link>
</div>

在el-button的外面套了一層el-link,如下圖,可以正常下載

在這里插入圖片描述

以下是el-link文字鏈接的屬性


在這里插入圖片描述

總結

以上所述是小編給大家介紹的vue實現點擊按鈕下載文件功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • Nuxt項目支持eslint+pritter+typescript的實現

    Nuxt項目支持eslint+pritter+typescript的實現

    這篇文章主要介紹了Nuxt項目支持eslint+pritter+typescript的實現,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • Vue過濾器的用法和自定義過濾器使用

    Vue過濾器的用法和自定義過濾器使用

    本篇文章主要介紹了Vue過濾器的用法和自定義過濾器,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • 詳解Vue中組件的緩存

    詳解Vue中組件的緩存

    這篇文章主要介紹了Vue中組件的緩存,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • vue 中滾動條始終定位在底部的方法

    vue 中滾動條始終定位在底部的方法

    今天小編就為大家分享一篇vue 中滾動條始終定位在底部的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue.js中v-on:textInput無法執行事件問題的解決過程

    vue.js中v-on:textInput無法執行事件問題的解決過程

    大家都知道vue.js通過v-on完成事件處理與綁定,但最近使用v-on的時候遇到了一個問題,所以下面這篇文章主要給大家介紹了關于vue.js中v-on:textInput無法執行事件問題的解決過程,需要的朋友可以參考下。
    2017-07-07
  • 用vue快速開發app的腳手架工具

    用vue快速開發app的腳手架工具

    這篇文章主要介紹了用vue快速開發app的腳手架工具,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • Vue Components 數字鍵盤的實現

    Vue Components 數字鍵盤的實現

    這篇文章主要介紹了Vue Components 數字鍵盤的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • Vuex中mutations與actions的區別詳解

    Vuex中mutations與actions的區別詳解

    下面小編就為大家分享一篇Vuex中mutations與actions的區別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 手把手帶你封裝一個vue component第三方庫

    手把手帶你封裝一個vue component第三方庫

    這篇文章主要介紹了手把手帶你封裝一個vue component第三方庫,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-02-02
  • Vue 實現手動刷新組件的方法

    Vue 實現手動刷新組件的方法

    這篇文章主要介紹了Vue 實現手動刷新組件的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02

最新評論

pc蛋蛋计划下载