vue內點擊url下載文件最佳解決方案

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

解決方案:

• 封裝自定義指令
• 將url轉成bold,在創建a標簽下載blob

代碼實現

1. 在src 下面的 directive 文件夾下新建目錄 down-load-url

2. down-load-url / index.js文件

/*
 * 后端返回文件的url,前端創建a標簽來下載
 *
 *  1. 解決了若文件為圖片或瀏覽器支持的格式類型,點擊下載會直接打開文件的問題,
 *  2. 下載文件時,瀏覽器會有閃動的問題
 *
 *  頁面內使用
 *  1. 引入指令 import downLoad from '@/directive/down-load-url'
 *  2. 注冊指令 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

3. 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轉成blob地址，
      fetch(url).then(res => res.blob()).then(blob => { // 將鏈接地址字符內容轉變成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()
      })
    })
  }
}

 

 

轉載地址:https://blog.csdn.net/weixin_45970617/article/details/111415579