vue+axios 下载后端返回的文件流

blob 请求后台，后台返回文件流，利用ajax或者axios请求返回下载文件

 

1.问题描述：

首先描述一下遇到的问题，可能大家对于ajax,axios或者一些其他的请求后台的工具的应用都是，后台返回数据一般都是对象或者是其他的数据类型。但是对于一些下载文件显的很难应对，不知道该怎么处理。

2.解决方案：

后台返回的是文件流：我们利用 Blob 解决这个问题

首先简单介绍一下什么是blob。

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。 

Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

参考文献： https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

话不多说直接上正题： 

大家都关心的问题，知道了用Blob这个东西解决，那么我们应该怎么写代码呢。

直接附上vue 框架中的axios写法，有兴趣的同学可以自己探索别的技术中的写法。

axios({
          method: 'post',
          url: process.env.VUE_APP_BASE_API + '/system/eventWord/ExportEvent',
          headers: {
            'Content-type': 'application/json;charset:utf-8;',
            'accessToken': getToken() //认证或授权
          },
          data: {strGuid: this.eventId},
          responseType: 'blob'
        }).then((res) => {
          const blob = new Blob([res.data]);
          const fileName = '事件详情.docx';
          if ('download' in document.createElement('a')) { // 非IE下载
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);// 释放URL 对象
            document.body.removeChild(elink);
            this.loading = false;
          } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName);
            this.loading = false;
          }
        }).catch((err) => {
          console.log(err);
          this.loading = false;
        });

代码说明：

responseType: 'blob'

这个东西必须加，否则可能会导致下载的内容乱码。

具体这个代表什么：

参考文献：http://www.axios-js.com/zh-cn/docs/index.html

表示服务器响应的数据类型，可以是

'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

当然里面的东西，请大家自己参考实际当中自行修改。