快捷導(dǎo)航

vue內(nèi)點(diǎn)擊url下載文件的最佳解決方案分享

更新時(shí)間：2022年02月20日 10:30:14 作者：Mr_li@web

這篇文章主要給大家介紹了關(guān)于vue內(nèi)點(diǎn)擊url下載文件的最佳解決方案,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

開發(fā)中經(jīng)常遇到這樣的功能,用戶將文件或附件上傳到服務(wù)器,后端將文件放到ftp或是其他位置,在前端頁面內(nèi)有下載的入口,有時(shí)候,后端返回的是blob,這種情況當(dāng)然是最好的,但是為了方便,后端也可能返回文件所在位置的url,這時(shí),對(duì)前端來說,可能遇到一些問題,比如,下載文件時(shí)候?yàn)g覽器可能會(huì)出現(xiàn)閃動(dòng),下載圖片,json文件等瀏覽器支持的文件時(shí)候,不會(huì)下載,而是直接在瀏覽器內(nèi)打開這類文件,下面的方法可以完美解決此類問題

解決方案:

封裝自定義指令
將url轉(zhuǎn)成bold,在創(chuàng)建a標(biāo)簽下載blob

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

在src 下面的 directive 文件夾下新建目錄 down-load-url
down-load-url / 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

down-load-url / downLoad.js文件

export default {
  bind(el, binding) {
    el.addEventListener('click', () => {
      console.log(binding.value) // url
      const a = document.createElement('a')
      //   let url = baseUrl + binding.value // 若是不完整的url則需要拼接baseURL
      const url = binding.value // 完整的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 = '' // 下載文件的名字
        // a.download = url.split('/')[url.split('/').length -1] //  // 下載文件的名字
        document.body.appendChild(a)
        a.click()
      })
    })
  }
}