前端js导出xls文件,兼容后端同一接口允许返回二进制流和json数据格式

直接上代码

// 接口请求我们用的是axios的插件
import axios from "axios";
import { Message } from 'element-ui';  // Message为element-ui的弹窗提示组件

// url为后端接口地址
//data为请求接口携带的数据
//methods为请求方法
async function exportXls(url,data, name, method=get){
  await axiox( {
  method,
  url,
  data,
  params:data,
  responseType: 'blob', // 关键点在这
  timeout: 30000
  }).then(res => {
    if(res.type === 'application/json'){  // 返回的数据为json格式
      const fileReader = new FileReader();
      fileReader.onload = ()=> {
        try {
          const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据,后台转换失败
          if(jsonData.code === 0){ 
           Message.success( '操作成功'); 
          } else {
            Message.error(jsonData.msg ? jsonData.msg : '导出失败');
          }
        } catch (err) { // 解析成对象失败,说明是正常的文件流
          console.log(err);
          toFile(res,name);

        }
      }
      fileReader.readAsText(res);

   } else {  // 返回二进制流数据  就转成xls文件下载
    toFile(res,name);
   }
  })
}

toFile方法在这.
toFile是把后端返回的二进制流数据转成xls文件并下载

 function toFile(res, name=‘返回文件名’){
  	 if(!res || !(res instanceof Blob))return;
 	  const link = document.createElement('a')
	  let blob = new Blob([res],{type: 'application/vnd.ms-excel;charset=UTF-8'});
	  link.style.display = 'none'
	  link.href =  window.URL.createObjectURL(blob);
	  link.setAttribute('download', name);
	  document.body.appendChild(link);
	  link.click();
	  document.body.removeChild(link);
	  window.URL.revokeObjectURL(blob);

}

版权声明:本文为w807139809原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。