ant 二进制流 excel格式输出兼容性IE

最新推荐文章于 2023-09-28 19:00:00 发布

原创最新推荐文章于 2023-09-28 19:00:00 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ant #二进制流输出 #excel

后台返回的二进制流在某些情况下无法直接转换为Excel文件，本文提供了解决此问题的方法，包括JS、Model和Server层的处理。同时，针对浏览器兼容性问题，特别是IE的兼容性进行了探讨。

通常如果后台返还给你链接形式，你可以直接调取下载文件，但有些情况特殊，比如客户需求，要求返回的excel文档格式特殊，那么后台会返还二进制流。二进制流有时无法下拉取出进一步转换。

所以，以下为解决方法。
js层

derive=()=>{
    const {gain} = this.state;
    this.props.dispatch({
      type:'Statemanagement/',
      payload:{
        gain
      }
    }).then((res)=>{
      console.log(res,"res")
      if(res){
        const blobUrl = window.URL.createObjectURL(res);// 生成链接
        console.log(blobUrl);
        const tempLink = document.createElement('a');// 创建a标签去下载
        tempLink.href = blobUrl;
        tempLink.download = `资源${new Date().getTime()}.xlsx`;
        tempLink.setAttribute('target', '_blank');
        tempLink.style.display = 'none';
        document.body.appendChild(tempLink);
        tempLink.click();
        document.body.removeChild(tempLink);
        window.URL.revokeObjectURL(blobUrl);
      }
    })
  }

model层

export default {
    *exportById({ payload }, { call }) {
      const response = yield call(exportById, payload);
      return response;
    },
}

server层

import request from '@/utils/request';

export async function exportById(params) {
  return request(`/aaa/personnel/exportById`, {
    method: "POST",
    responseType: 'blob',
    data: { ...params },
  });
}

request

request.interceptors.response.use( async(response, options) => {
  if (response.url.indexOf('personnel/exportById') !== -1) {
    const res = await response.clone().text();
    console.log(res);
  } else {
   
    const res = await response.clone().json();
    // console.log(res);
    const {code, path, msg, status } = res;
    if (code === 401) {
      Modal.confirm({
        title: '系统提示',
        content: '登录状态已过期，您可以继续留在该页面，或者重新登录',
        okText: '重新登录',
        cancelText: '取消',
        onOk: () =>  {
         window.g_app._store.dispatch({
            type: 'login/logout',
          }).then(() => { window.location.reload()})
        }
      })
    } else if (code !== 200) {
      // 待开放
      // notification.error({
      //   message: `请求错误 ${code || status }: ${path}`,
      //   description: errortext,
      // });
      // return Promise.reject('error');
    }
  }
  return response;
});

另外如果是不同浏览器会出现兼容性问题。比如兼容ie

  derive=()=>{
      this.props.dispatch({
        type:'borderSystem/derive',
        payload:{}
      }).then((res)=>{
        if(res&&res!==null&&res!==undefined){
          if('msSaveOrOpenBlob' in navigator){
            //ie使用的下载方式
              window.navigator.msSaveOrOpenBlob(res.data,`未配记录.xlsx`);
          }else{
            if (window.FileReader) {
              let reader = new FileReader();
              reader.readAsDataURL(res);    // 转换为base64，可以直接放入a表情href
              reader.onload = function (e) {
                  // 转换完成，创建一个a标签用于下载
                  var a = document.createElement('a');
                  a.download = `未配记录.xlsx`;
                  a.href = e.target.result;
                  a.target ="downloadframe";
                  document.body.appendChild(a);   // 修复firefox中无法触发click
                  a.click();
                  document.body.removeChild(a);
              }
            }
          }
        }
      })
    }  
  }