标签：返回 axios elink 请求 Blob 后台 document blob

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'。

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

标签：返回,axios,elink,请求,Blob,后台,document,blob
来源： https://www.cnblogs.com/shangguancn/p/14789220.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。