Vue 自定义指令下载文件

也是够够的了

已于 2022-08-04 17:33:35 修改

阅读量1k

点赞数 2

分类专栏： vue 文章标签： vue.js elementui 前端

于 2022-08-04 17:32:33 首次发布

本文链接：https://blog.csdn.net/weixin_55869175/article/details/126163634

版权

vue 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

本次使用到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()
                    })
                })
            }
        })

使用：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>