Vue中點擊url下載文件的案例詳解

更新時間：2022年04月19日 10:23:41 作者：JackieDYH

這篇文章主要介紹了Vue中點擊url下載文件案例詳解，此文需要注意若是文件的url存在跨域的情況，則可能會下載失敗，因為fetch請求連接后，由于跨域，拿不到資源，也就無法執(zhí)行后續(xù)的操作，此時是失敗的,詳細內(nèi)容跟隨小編一起看看吧

代碼實現(xiàn)

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

downLoadUrl / index.js文件

/*
 * 后端返回文件的url,前端創(chuàng)建a標簽來下載
 *
 *  1. 解決了若文件為圖片或瀏覽器支持的格式類型,點擊下載會直接打開文件的問題,
 *  2. 下載文件時,瀏覽器會有閃動的問題
 *
 *  頁面內(nèi)使用
 *  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

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注冊自定義指令