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

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文件

/**
 * 下载文件
 */exportdefault{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'constinstall=function(Vue){
  Vue.directive('down', down)}exportdefault install

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

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

各个组件中使用

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

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