导出Excel二进制文件流

第一次对接后端二进制流导出，一脸蒙逼。所以做完赶紧记录一下解决方案。

对接口分析：

1. 确认返回的是二进制流;
2. 查看返回值【如下】确认接口无问题：浏览器有时是无法看到二进制码流的，所以可以通过这两个参数确认接口请求已成功
   
   微信图片_20210209105834.png

  filename: 文件名；
  Content-type: 对应Blob第二个参数type类型

项目使用vue + axios请求

注意： 1. 确认返回值类型【responseType】是‘Blob | ArrayBuffer...’, 如果无法确认， 那不好意思，自己尝试！！！

axios({
  url: '*******',
  method: 'GET|POST',
  params | data,
  responseType: 'ArrayBuffer | Blob' 下面解析方式是一样的
}).then(res => {
  const all = res.data;
  if (all instanceof ArrayBuffer) { // 是否是arrayBuffer, 如果是Blob等需要其他判断方式
    // 文件名
    const fileName = res.headers['content-disposition'].match(
      /filename=(.*)/
    )[1];
    // new Blob解析: type 与上图  Content-type 一致
    const blob = new Blob([all], { type: 'application/octet-stream' });
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
      window.navigator.msSaveBlob(blob, decodeURI(fileName));
    } else {
      if (res.headers['content-type'] === 'APPLICATION/OCTET-STREAM') {
        let url = window.URL.createObjectURL(blob);
        let down = document.createElement('a');
        down.download = fileName;
        down.href = `${url}`;
        down.style.display = 'none';
        // 兼容：某些浏览器不支持HTML5的download属性
        if (typeof down.download === 'undefined') {
          down.setAttribute('target', '_blank');
        }
        // 触发点击
        document.body.appendChild(down);
        down.click();
        // 然后移除
        document.body.removeChild(down);
        // 释放blob URL地址
        window.URL.revokeObjectURL(url);
      }
    }
  }
 })