Vue | 实现带token验证的文件流下载

2018-10-19 本文已影响1582人不忘初心CKL

之前暑假和团队一起做了一个仿百度云盘的系统，涉及到文件的下载，预览等等，都不需要携带token。想想其实这种设计是不合理的。但是当时由于技术水平不高，所以只能采取不加控制的文件操作。但是在新的任务中，给的接口就是要求headers中携带token，然后后台返回文件流，折腾了一番终于80%上实现了这个功能。

首先讲讲不需要token验证的文件下载前端怎么实现
原理其实非常简单，利用a标签

<a href="url" download="name"></a>

解释一下，a标签href里放置文件的地址，这个地址是文件在服务器上存储的地址。
假如在服务器端有一个专门的文件服务器，那么这个地址就是文件实际上在文件服务器中存储的地址。
download其实可加可不加，表示文件的名称。不加就是文件的默认文件名
当点击a标签的时候，文件的下载过程，转码等等操作是由浏览器来自主完成的，浏览器能自动检测文件扩展名来生成对应的文件格式。

然后讲讲需要token验证的文件下载前端怎么做
首先是有两种方法的
第一种，还是使用a标签。在请求的正确返回里构造一个a标签

this.$axios.get('/xxxxx')
      .then(res => {
          var btn = document.createElement("a"); 
          btn .setAttribute('download', '');// download属性
          btn .setAttribute('href', '');// href链接
          abtn click();// 自执行点击事件
})

由此可见，这种方法的关键在于，还是要后台返回准确的文件地址

第二种的使用情景就是后台返回的直接是文件流形式。js在浏览器环境中是不能像其他语言一样对文件进行操作的（比如C的fread,java的读取文件操作等等）。
那么由于文件在网络中传输都是以二进制流形式传输的，所以我们要借助一个特殊的对象=>Blob
Blob对象表示一个不可变的, 原始数据的类似文件对象，blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。实际上file类也是从blob类继承来的。

下面演示一下如何用blob对象接收文件流。

this.$axios.get('XXXXXXX',{
           responseType:'blob'      //告诉服务器我们需要的响应格式
         })
           .then(res => {
             let blob = new Blob([res.data],{
               type:'application/vnd.ms-excel'      //将会被放入到blob中的数组内容的MIME类型 
             });
             let objectUrl = URL.createObjectURL(blob);  //生成一个url
             window.location.href = objectUrl;   //浏览器打开这个url
           })
           .catch(err => {
             console.log(err);
           })

MIME类型是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开

通过以上代码，我们就可以让文件流被正确下载啦

最后来说说为什么我认为只实现了80%的期望功能。上述构造Blob对象的方式，生成的文件名是由Blob对象随机生成的一段随机数，并不是期望的文件名。我暂时没有找到在使用Blob的同时设置指定的文件名，希望大佬们多多指教

Vue | 实现带token验证的文件流下载

猜你喜欢

热点阅读