前端Vue点击文件下载方案

1、背景

有一个后台管理的功能：查看消息推送的日志，日志内容存储在阿里云OSS，数据库保存的是日志的存放地址，文件格式是txt，该文件格式由于浏览器支持打开，所以不会触发下载，会直接从浏览器打开，

浏览器直接打开多半会乱码，产品要求点击下载。

2、问题分析 

直接a标签href=日志文件url，这样会在浏览器直接打开，通过window.location.href=日志文件url，也是同样的效果。HTML5中a标签有个download属性，可以触发下载，但支持的浏览器较少，只有谷歌和火狐支持，

并且href所指向的url只能是和应用服务器同域名，否则还是会浏览器打开。

所以这个问题要么后端和前端配合解决，通过前端调用后端的接口，使用文件流传输。要么直接前端解决，有什么办法能让浏览器触发下载而不是在浏览器直接打开。相比而言肯定是前端解决要好些，比较完整的日志url已经有了。

3、解决问题

结合网上的资料，找到一种方法，前端先获取url内容，然后转换为blob对象，然后在把该对象添加到document的body的a标签里面，并触发点击事件，这时就会让浏览器下载了。

具体代码：

1、自定义vue指令，vue项目的directives下面新建index.js

import Vue from 'vue';
 
Vue.directive('downLoad', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      const a = document.createElement('a');
      const url = binding.value; // 完整的url则直接使用
      const httpsUrl = url.replace('http://xxxx.oss-cn-shenzhen-internal.aliyuncs.com/', 'https://xxx.abc.com/');
      // 这里是将url转成blob地址，
      fetch(httpsUrl).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
        a.href = URL.createObjectURL(blob);
        // 下载文件的名字
        a.download = url.split('/')[url.split('/').length - 1];
        document.body.appendChild(a);
        a.click();
        return a
      }).then(doc => {
        //最后把新建的节点删除
        document.body.removeChild(doc);
      });
    });
  },
});

2、main.js引入directives

import '@/directives';

3、vue文件里面使用自定义指令：v-downLoad

<a href="javascript:void(0);" v-downLoad="'http://xxxx.oss-cn-shenzhen-internal.aliyuncs.com/notification/70dc616de5434480ba1defe2761c0d22.txt'" rel="noopener">日志</a>