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 @   行走的蒲公英  阅读(495)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示