react 获取文件流导出功能

记录一下:

根据后台接口返回的文件流,前端实现导出下载,使用(react+ts)

1.请求方法 (这里写法绕开拦截器)

// 导出日志
export async function exportLog(data: ILogparams) {
  const url = getRequestUrl(API.exportLog);
  const res: any = await axios({
    url: url,
    method: 'post',
    data: data,
    responseType: 'arraybuffer',
    headers: {
      token: `Bearer ${LocalLoginStateManager.getToken()}`,
    },
  });
  return res;
}

2. 调用的方法

 import { saveAs } from 'file-saver';
 // 导出
  const handleExport = () => {
    let data = {
      keyWord: keyword,
      pageNumber: current,
      pageSize,
    };
    exportLog(data).then(res => {
      if (res) {
        let url = window.URL.createObjectURL(
          new Blob([res.data], {
            type:
              'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          }),
        );
        saveAs(url, '导出日志.xlsx');
      } else {
        message.error('导出失败');
      }
    });
  };

 

posted @ 2023-02-20 09:56  行走的蒲公英  阅读(458)  评论(0编辑  收藏  举报