Ant Design Pro v4 从后端下载 excel，后端返回的是文件流

最新推荐文章于 2024-07-22 16:06:14 发布

原创最新推荐文章于 2024-07-22 16:06:14 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

React 同时被 3 个专栏收录

17 篇文章

订阅专栏

react 技术栈（全家桶）学习心得分享

17 篇文章

订阅专栏

react 技术栈（全家桶）实战系列

2 篇文章

订阅专栏

本文详细介绍如何在前后端分离的架构下，从前端发起API请求以下载Excel文件，包括处理参数、使用fetch进行文件流读取及浏览器下载实现。

前后端分离，后端返回文件流，在前端通过请求 api 的方式下载 excel 文件。

前端代码

适用于 v4，应该也适用于 v2.3.1，在 v4 版本下测试通过，如果用的是 v2.3.0，请看最后面的修改方式。
另外，刚用 TypeScript，因为还不是很熟，有些地方还不符合 TypeScript 的编码规范，先将就看~~

export function excelDownload(url, options) {
  let tokenSessionStorage: string | null = sessionStorage.getItem('token');
  let excelFileName : string | null = options.body.excelFileName;

  options = { credentials: 'include', ...options };
  options.body = JSON.stringify({
    method: url,
    jsonStringParameter: JSON.stringify(options.body),
  });

  options.headers = {
    Accept: 'application/json',
    'Content-Type': 'application/json; charset=utf-8',
    Authorization: tokenSessionStorage,
    ...options.headers,
  };

  fetch(url, options)
    .then(response => response.blob())
    .then(blobData => {
      download(blobData, excelFileName);
    });
}

function download(blobData: Blob, forDownLoadFileName: string | null): any {
  const aLink = document.createElement('a');
  document.body.appendChild(aLink);
  aLink.style.display = 'none';
  aLink.href = window.URL.createObjectURL(blobData);
  aLink.setAttribute('download', forDownLoadFileName);
  aLink.click();
  document.body.removeChild(aLink);
}

遇到的坑

前端提交请求的参数体，用的是 options.data，参照了登录的 api 请求方法，在文件 src\services\login.ts 中定义。

export async function fakeAccountLogin(params: LoginParamsType) {
  return request('/api/auth/login', {
    method: 'POST',
    data: params,
  });
}

我的方法是：

export async function exportToExcelCollectionDetail(params) {
  return excelDownload('/api/exportToExcel/collectionDetail', {
    method: 'POST',
    data: params,
  });
}

调用前将 data 转换成 json 数据：

  options.data = JSON.stringify({
    method: url,
    jsonStringParameter: JSON.stringify(options.data),
  });

在后端，只有 method 有值，jsonStringParameter 被“吞”掉了，就象没有传这个参数一样，所以，得到的值是 null。

各种查资料，后来在 fetch 的 github 项目看到，Post JSON，请求的参数用的是 body，代码如下：

fetch('/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})

于是，将 options.data 改为 options.body：

  options.body = JSON.stringify({
    method: url,
    jsonStringParameter: JSON.stringify(options.body),
  });

记得调用方也要改：

export async function exportToExcelCollectionDetail(params) {
  return excelDownload('/api/exportToExcel/collectionDetail', {
    method: 'POST',
    body: params,
  });
}

竟然就可以了！

在查询数据，以及登录功能，都用的是关键字 data，能正常传递参数，不过，调用的是 umi-request 封装过的 fetch，umi-request 对参数的定义是：

export interface RequestOptionsInit extends RequestInit {
  charset?: 'utf8' | 'gbk';
  requestType?: 'json' | 'form';
  data?: any;
  params?: object;
  responseType?: ResponseType;
  useCache?: boolean;
  ttl?: number;
  timeout?: number;
  errorHandler?: (error: ResponseError) => void;
  prefix?: string;
  suffix?: string;
  throwErrIfParseFail?: boolean;
  parseResponse?: boolean;
  cancelToken?: CancelToken;
}

后端导出 excel 文件的代码片断

// 设置response头信息
response.reset();
response.setContentType("application/x-download;charset=UTF-8");

try {
    response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(excelFileName, "UTF-8") + ".xls");
    //创建一个WorkBook,对应一个Excel文件
    HSSFWorkbook wb = new HSSFWorkbook();
    //在Workbook中，创建一个sheet，对应Excel中的工作薄（sheet）
    HSSFSheet sheet = wb.createSheet(excelFileName);
    HSSFCellStyle headerStyle = getStyleHeader(wb);
    // 填充工作表
    // some code

    //将文件输出
    OutputStream outputStream = response.getOutputStream();
    wb.write(outputStream);
    outputStream.flush();
    outputStream.close();
    wb.close();
} catch (Exception e) {
    e.printStackTrace();
}

ant design pro v2.3.0 版本，导出 excel

修改 src\utils\request.js，在以下代码的 return 之前：

  return (
    fetch(url, newOptions)
      .then(checkStatus)
      //.then(response => cachedSave(response, hashcode))
      .then(response => {
// codes

添加以下代码：

  if (url.includes('exportToExcel')) {
    const { excelFileName } = options.body;

    return fetch(url, newOptions)
      .then(response => response.blob())
      .then(blobData => {
        download(blobData, excelFileName);
      });
  }

前提是，下载 excel 的 api 路径都要添加 exportToExcel。
其中，download 方法在 v2 与 v4 通用，请参照 v4 的代码。
对 newOptions 的处理，在 if (!(newOptions.body instanceof FormData)) { 下添加：

newOptions.headers = {
  Authorization: token,
  Accept: 'application/json',
  'Content-Type': 'application/json; charset=utf-8',
  ...newOptions.headers,
};

newOptions.body = JSON.stringify({
  method: url,
  jsonStringParameter: JSON.stringify(newOptions.body),
});