原文鏈接: https://juejin.cn/post/7062888582465191944
作者: 遠(yuǎn)航_

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

解決方案:

• 封裝自定義指令

• 將url轉(zhuǎn)成bold,在創(chuàng)建a標(biāo)簽下載blob

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

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

2. downLoadUrl / index.js文件

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

import downLoad from './downLoad'

const install = function(Vue) {
  Vue.directive('downLoadUrl', downLoad)
}

downLoad.install = install

export default downLoad

3. 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);
                })
            })
        }
    }
}

4. 在main.js注冊自定義指令

使用

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

注意

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

插件 file-saver 鏈接地址： blog.csdn.net/qq_30671099…