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'。
当然里面的东西,请大家自己参考实际当中自行修改。