欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中點(diǎn)擊url下載文件的案例詳解

 更新時(shí)間:2022年04月19日 10:23:41   作者:JackieDYH  
這篇文章主要介紹了Vue中點(diǎn)擊url下載文件案例詳解,此文需要注意若是文件的url存在跨域的情況,則可能會(huì)下載失敗,因?yàn)閒etch請(qǐng)求連接后,由于跨域,拿不到資源,也就無法執(zhí)行后續(xù)的操作,此時(shí)是失敗的,詳細(xì)內(nèi)容跟隨小編一起看看吧
  • 封裝自定義指令
  • 將url轉(zhuǎn)成bold,在創(chuàng)建a標(biāo)簽下載blob

代碼實(shí)現(xiàn)

在src 下面的 directive 文件夾下新建目錄 downLoadUrl

downLoadUrl / index.js文件

/*
 * 后端返回文件的url,前端創(chuàng)建a標(biāo)簽來下載
 *
 *  1. 解決了若文件為圖片或?yàn)g覽器支持的格式類型,點(diǎn)擊下載會(huì)直接打開文件的問題,
 *  2. 下載文件時(shí),瀏覽器會(huì)有閃動(dòng)的問題
 *
 *  頁面內(nèi)使用
 *  1. 引入指令 import downLoad from '@/directive/down-load-url'
 *  2. 注冊(cè)指令 directives:{downLoad}
 *  3. 使用,在要下載按鈕上以指令的形式使用 例如: <el-button v-downLoad="url">下載</el-button>
 */
 
import downLoad from './downLoad'
 
const install = function(Vue) {
  Vue.directive('downLoadUrl', downLoad)
}
 
downLoad.install = install
 
export default downLoad

downLoadUrl / downLoad.js文件

export default {
    bind(el, binding) {
        if (binding.value.url) {
            el.addEventListener('click', () => {
                const a = document.createElement('a')
                //   let url = baseUrl + binding.value // 若是不完整的url則需要拼接baseURL
                const url = binding.value.url // 完整的url則直接使用
                // 這里是將url轉(zhuǎn)成blob地址,
                fetch(url).then(res => res.blob()).then(blob => { // 將鏈接地址字符內(nèi)容轉(zhuǎn)變成blob地址
                    a.href = URL.createObjectURL(blob)
                    console.log(a.href)
                    a.download = binding.value.name || '' // 下載文件的名字
                    // a.download = url.split('/')[url.split('/').length -1] //  // 下載文件的名字
                    document.body.appendChild(a)
                    a.click()
                    
                    //在資源下載完成后 清除 占用的緩存資源
                    window.URL.revokeObjectURL(a.href);
                    document.body.removeChild(a);
                })
            })
        }
    }
}

在main.js注冊(cè)自定義指令

使用

返回一個(gè)對(duì)象{ url: '', name: ''}

注意

1、若是文件的url存在跨域的情況,則可能會(huì)下載失敗,因?yàn)閒etch請(qǐng)求連接后,由于跨域,拿不到資源,也就無法執(zhí)行后續(xù)的操作,此時(shí)是失敗的。

2、也可以設(shè)置瀏覽器,對(duì)于一下像pdf,圖片等資源不直接打開,直接下載,然后簡(jiǎn)單的創(chuàng)建a標(biāo)簽下載即可。

到此這篇關(guān)于Vue中點(diǎn)擊url下載文件-案例的文章就介紹到這了,更多相關(guān)vue點(diǎn)擊url下載文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 沒有搭建腳手架時(shí)vue組件的使用方式

    沒有搭建腳手架時(shí)vue組件的使用方式

    這篇文章主要介紹了沒有搭建腳手架時(shí)vue組件的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 如何實(shí)現(xiàn)vue的tree組件

    如何實(shí)現(xiàn)vue的tree組件

    這篇文章主要介紹了如何實(shí)現(xiàn)vue的tree組件,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下
    2020-12-12
  • 如何本地運(yùn)行vue?dist文件

    如何本地運(yùn)行vue?dist文件

    這篇文章主要介紹了如何本地運(yùn)行vue?dist文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue3中虛擬dom的介紹與使用詳解

    vue3中虛擬dom的介紹與使用詳解

    Vue?是如何將一份模板轉(zhuǎn)換為真實(shí)的?DOM?節(jié)點(diǎn)的,又是如何高效地更新這些節(jié)點(diǎn)的呢,這些都離不開虛擬dom這個(gè)概念,下面我們就來了解下虛擬dom這個(gè)概念以及它是什么吧
    2024-01-01
  • Vue異步更新機(jī)制及$nextTick原理的深入講解

    Vue異步更新機(jī)制及$nextTick原理的深入講解

    最近在學(xué)習(xí)一些底層方面的知識(shí),所以想做個(gè)系列嘗試去聊聊這些比較復(fù)雜又很重要的知識(shí)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue異步更新機(jī)制及$nextTick原理的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • vue+elementUi 實(shí)現(xiàn)密碼顯示/隱藏+小圖標(biāo)變化功能

    vue+elementUi 實(shí)現(xiàn)密碼顯示/隱藏+小圖標(biāo)變化功能

    這篇文章主要介紹了vue+elementUi 實(shí)現(xiàn)密碼顯示/隱藏+小圖標(biāo)變化功能,需本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-01-01
  • Vue響應(yīng)式原理模擬實(shí)現(xiàn)原理探究

    Vue響應(yīng)式原理模擬實(shí)現(xiàn)原理探究

    這篇文章主要介紹了Vue響應(yīng)式原理,響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生了改變的時(shí)候,就會(huì)運(yùn)行一些函數(shù),最常見的示render函數(shù)
    2022-09-09
  • vue實(shí)現(xiàn)井字棋游戲

    vue實(shí)現(xiàn)井字棋游戲

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)井字棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • Vue props用法詳解(小結(jié))

    Vue props用法詳解(小結(jié))

    這篇文章主要介紹了Vue props用法詳解(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • 詳解如何使用vue實(shí)現(xiàn)頁面訪問攔截

    詳解如何使用vue實(shí)現(xiàn)頁面訪問攔截

    這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)頁面訪問攔截功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,需要的可以了解一下
    2023-08-08

最新評(píng)論