vue前端导出/下载表格使用Blob处理后台返回的二进制流数据

功能：接口返回文件流，前端实现文件下载/导出功能

一般有2种方法：

1. 后台返回一个下载地址url。这种方式是后台得先生成文件保存在服务器某个地方，然后返回给前端url地址，前端直接拿到url地址一行代码去下载文件即可。这种有个问题就是后台得知道什么时候可以删除生成的那个文件。（不推荐使用） 
2. 后台返回给前端的是一个二进制流，这种方式好处在于后台不用生成文件去保存，二进制流保存在内存中，不用占用服务器存储空间，不用考虑什么时候删除去文件。（推荐使用） 

 方法：主要讲第二种方法

---

/**
 * 通过a标签导出一个文件流
 * @param {文件流} res
 * @param {文件名} name
 */
export const exportFile = (res, fileName) => {
  const blob = new Blob([res], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  });
  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);
  } else {
    // IE10+下载
    navigator.msSaveBlob(blob, fileName);
  }
};

 使用：

   exportProjectList() {
      getFileDate().then((res) => {
        if (res) {
          exportFile(res, '这是下载的文件名~');
        }
      });
    },

注意：

getFileDate接口请求的方式需为post 且  responseType为 'blob'