Vue根据网络文件路径下载文件【自定义属性 v-down】

提到下载文件大家首先肯定会想到 模拟点击 、a标签等
因为发现公司同事还在使用向后端拿二进制流来下载这就对后端的流操作以及前端的工作增加了不少工作量偶然想到使用VUE自定义属性来快速实现下载文件、图片等

我们会发现在使用a标签等操作下载图片时会被浏览器识别直接打开预览效果十分不佳废话不说上代码下载文件so easy

标准使用方式

<script>
Vue.directive('down', {
  inserted: (el, binding) => {
    el.style.cssText = 'cursor: pointer;color:write;'
    el.addEventListener('click', () => {
      console.log(binding.value)
      let link = document.createElement('a')
      let url = baseDownloadUrl + binding.value
      // 这里是将url转成blob地址
      fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
        link.href = URL.createObjectURL(blob)
        console.log(link.href)
        link.download = ''
        document.body.appendChild(link)
        link.click()
      })
    })
  }
})
</script>

//使用方式
<span v-down="url">下载</span>

以上为常规标准使用方法但在企业级开发中我们都是使用全局挂载的方式来完成的

企业级Vue开发集成(全局挂载)

此处以若依框架为例

1.src目录下创建directive文件夹存在则忽略

• directive目录下创建download目录
• 创建down.js文件

2.down.js文件

/**
 * 下载文件
 */
export default {
    inserted: (el, binding) => {
        el.style.cssText = 'cursor: pointer;color:write;'
        el.addEventListener('click', () => {
            console.log(binding.value)
            let link = document.createElement('a')
            let url = binding.value
            // 这里是将url转成blob地址
            fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
                link.href = URL.createObjectURL(blob)
                console.log(link.href)
                link.download = ''//为空使用下载名称
                document.body.appendChild(link)
                link.click()
            })
        })
    }
}

3.directive根目录创建index.js文件

文件内容如下

import down from './download/down'

const install = function(Vue) {
  Vue.directive('down', down)

}

export default install

4.main.js 注册自定义属性全局挂载

import directive from './directive' // directive
Vue.use(directive)

各个组件中使用

//任何标签均可使用 且不用担心跨域
 <span v-down="durl" style="width:100px;height:50px">下载</span>

代码本人亲测有效不喜勿喷谢谢