import Vue from "vue";
Vue.directive('down', {
  inserted: (el, binding) => {
    el.addEventListener('click', () => {
      let link = document.createElement('a')
      let url = binding.value
      // 這里是將url轉(zhuǎn)成blob地址，
      fetch(url).then(res => res.blob()).then(blob => { // 將鏈接地址字符內(nèi)容轉(zhuǎn)變成blob地址
        link.href = URL.createObjectURL(blob)
        console.log(link.href)
        link.download = ''
        document.body.appendChild(link)
        link.click()
      })
    })
  }
})

let vdown = {
    mounted: (el, binding) => {
        el.addEventListener('click', () => {
            console.log(binding.value)
            let link = document.createElement('a')
            let url = binding.value
            // 這里是將url轉(zhuǎn)成blob地址，
            console.log(url)
            fetch(url).then(res => res.blob()).then(blob => { // 將鏈接地址字符內(nèi)容轉(zhuǎn)變成blob地址
                link.href = URL.createObjectURL(blob)
                console.log(link.href)
                link.download = ''
                document.body.appendChild(link)
                link.click()
            })
        })
    }
}
export default vdown

...
import '@/directive/vdonw'
...

import { createApp } from 'vue'
import App from './App.vue'
var app = createApp(App)
// 注冊(cè)指令
import vdown from '@/directive/vdown'
app.directive('down', vdown)
// 注冊(cè)結(jié)束
app.mount('#app')

...
<a v-down="'http://127.0.0.1:8888/file.txt'">下載文件</a>
...

module.exports = {
    devServer: {
        proxy: {
            '/serverfile': {
                target: 'http://www.xxx.com',//這里后臺(tái)的地址模擬的;應(yīng)該填寫你們真實(shí)的后臺(tái)接口
                ws: true,
                changOrigin: true,//允許跨域
                pathRewrite: {
                    '^/serverfile': '/'//請(qǐng)求的時(shí)候使用這個(gè)api就可以
                }
            }
        }
    }
}

...
<a v-down="'/serverfile/file.txt'">下載文件</a>
...