Vue 自定义指令 下载文件_vue下载文件自定义路径

本次使用到elemnetui中的Upload上传，效果如所示（采取官网）

想要的效果是，在点击上传的文件列表时候，下此文件。
代码：

 // 注册一个下载文件的自定义组件
    Vue.directive('downLoadUrl', {
            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()
                    })
                })
            }
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用：v-downLoadUrl="url" 传入文件的url地址即可

<el-link  target="_blank" :underline="false" v-downLoadUrl="file.url">
          <span class="el-icon-paperclip mar5 fc_1890ff"></span>
          <span class="fc_1890ff mar5">{{ getFileName(file) }}</span>
</el-link>
1
2
3
4