导出后端返回的二进制流文件为本地的.xlsx文件

1.分析

前端可以接收二进制流文件，但是不能处理，所以如果打印数据，有结果但看起来是乱码，因此需要前端先指定返回数据类型，和后端相同则可以正常显示

2.封装导出文件的工具函数

// data为blob实例
function exportData(data, fileName = '下载') { 
  if (!data) { 
    throw new Error("文件下载失败")
  } 
  let url = window.URL.createObjectURL(data); 
  let link = document.createElement("a"); 
  link.style.display = "none"; 
  link.href = url; 
  // download属性指示浏览器下载URL而不是导航到URL，提示用户将其保存为本地文件。
  link.download = fileName + ".xlsx"; 
  document.body.appendChild(link);
  // 点击下载
  link.click();
  document.body.removeChild(link);  
  //释放掉blob对象 
  window.URL.revokeObjectURL(url); 
}

3.axios封装的请求函数需要加以改动

service.interceptors.response.use( res => {
  //针对blob实例单独处理
  if(res.data instanceof Blob){ 
    return res.data 
  } 
  if (res.data.code === 0) { 
    return res.data; 
  } else if (res.data.code === 401) { 
    showMessage.error('登录过期'); 
    router.push('/login') 
  } else { 
     showMessage.error(res.data.msg); return res.data 
     } 
   }, () => { 
     showMessage.error('网络请求失败，反馈给客服'); 
   } 
 );

4.封装的post函数加以改动

const post = (url, data, config = {}) => { 
  config.url = url 
  config.data = data 
  config.method = 'post' 
  //使用url判断，如果是下载接口，则添加响应头为blob，以保持后后端返回数据类型一致
  if(url === '/xls/FileDownload/BssOrder') { 
    config.responseType = 'blob' 
  } 
  return service(config) }