Vue中點(diǎn)擊url下載文件的案例詳解
- 封裝自定義指令
- 將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)文章
Vue異步更新機(jī)制及$nextTick原理的深入講解
最近在學(xué)習(xí)一些底層方面的知識(shí),所以想做個(gè)系列嘗試去聊聊這些比較復(fù)雜又很重要的知識(shí)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue異步更新機(jī)制及$nextTick原理的相關(guān)資料,需要的朋友可以參考下2022-04-04vue+elementUi 實(shí)現(xiàn)密碼顯示/隱藏+小圖標(biāo)變化功能
這篇文章主要介紹了vue+elementUi 實(shí)現(xiàn)密碼顯示/隱藏+小圖標(biāo)變化功能,需本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01Vue響應(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