Vue axios 后端返回excel文件流改如何下载

这里先介绍一下Blob对象

Blob的英文全称是Binary Large Object，翻译成汉语是二进制大型对象。

HTML5中，Blob是一种JavaScript数据类型，用于存储二进制数据。

此对象中存储的数据没有必要非得是JavaScript原生格式数据，也就是没必要是JavaScript内部对象。

比如可以是File对象，它继承Blob对象，并扩展了一些功能。

1. 构造函数方式：

   这是最为基础的方式，与其他构造函数创建对象实例完全一样。

   语法结构：
   let blob = new Blob(array, options);
   参数解析：
   （1）.array：必需，数组，数组成员可以是二进制对象或者字符串。
   （2）.options：可选，对象，用于设置数组中数据的MIME类型。

首先设置返回的responseType: ‘bolb’

export function() {
  return request({
    url: '',
    method: 'get',
    params: {},
    responseType: 'blob'
  })
}

返回结果处理

.then( res => {
  let blob = new Blob([res], {type: res.type})
  let downloadElement = document.createElement('a')
  let href = window.URL.createObjectURL(blob); //创建下载的链接
  downloadElement.href = href;
  downloadElement.download = fileName; //下载后文件名
  document.body.appendChild(downloadElement);
  downloadElement.click(); //点击下载
  document.body.removeChild(downloadElement); //下载完成移除元素
  window.URL.revokeObjectURL(href); //释放blob对象
     
 })

代码分析如下：

（1）.首先，将字符串生成一个Blob对象。
（2）.然后通过URL.createObjectURL方法生成一个对应Blob对象的URL。
（3）.URL以blob:开头，其后是一串标识符，唯一标识内存中的指定Blob对象。
（4）.点击动态生成的链接，即可实现下载功能，用到了HTML5新增的download属性。
	URL对象也是HTML5新增，尚属实验性。
	同样的道理，也可以将图片转换为Blob对象，然后再使用URL.createObjectURL方法生成一个地址。