前端文件下载有两个模式：1.后端返回文件流，2.后端返回下载链接

后端返回文件流

文件流格式需要我们对二进制大对象有一定的了解，首先来看

blob(binary large object)

二进制大对象，可存储二进制文件的容器

web领域，定义为只读数据类文件对象

构建一个Blob对象通常有三种方式：

1.通过Blob对象的构造函数来构建。

2.从已有的Blob对象调用slice接口切出一个新的Blob对象。

3.canvas API toBlob方法，把当前绘制信息转为一个Blob对象

1> var blob =new Blob(arry,options)

参1：数据序列

参2：要放入blob中的数据类型（MIME）

var blob = new Blob(["Hello World!"],{type:"text/plain"})

Blob对象的基本属性：

• size ：Blob对象包含的字节数。(只读)

• type ： Blob对象包含的数据类型MIME，如果类型未知则返回空字符串。

  Blob`对象的基本方法：**

  大文件分割 (slice() 方法)，slice方法与数组的slice类似。

  不过目前浏览器实现此方法还没有统一，火狐使用的是 mozSlice() ，Chrome 使用的是 webkitSlice() ，其他浏览器则正常的方式 slice()

  function sliceBlob(blob, start, end, type) { type = type || blob.type; if (blob.mozSlice) { return blob.mozSlice(start, end, type); } else if (blob.webkitSlice) { return blob.webkitSlice(start, end type); } else { throw new Error("This doesn't work!"); } }

  MIME(Multipurpose Internet Mail Extensions)

  是描述消息内容类型的因特网标准。

  MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。

实际运用

          axios.post("",pramas,{responseType: 'blob'}).then(res=>{
          var blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
          var downloadElement = document.createElement('a');
          var href = window.URL.createObjectURL(blob); // 创建下载的链接
          downloadElement.href = href;
          let name=Date.parse(new Date());
          downloadElement.download = name+'.xlsx'; // 下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); // 点击下载
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
           })

后端返回下载链接

axios.post("",pramas).then(res=>{

let url = （返回地址）
let link = document.createElement('a')
 link.style.display = 'none'
 link.href = url
link.setAttribute('download',  "下载.xls")
document.body.appendChild(link)
 link.click()
 window.URL.revokeObjectURL(href);//释放blob
})

返回图片（验证码图片）

  this.codeImg = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))