前后端分離雅宾，后端返回文件流养涮，在前端通過(guò)請(qǐng)求 api 的方式下載 excel 文件。

前端代碼

• 適用于 v4眉抬，應(yīng)該也適用于 v2.3.1贯吓，在 v4 版本下測(cè)試通過(guò)，如果用的是 v2.3.0蜀变，請(qǐng)看最后面的修改方式悄谐。
• 另外，剛用 TypeScript库北，因?yàn)檫€不是很熟爬舰，有些地方還不符合 TypeScript 的編碼規(guī)范们陆，先將就看~~

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);
}

遇到的坑

前端提交請(qǐng)求的參數(shù)體，用的是 options.data洼专，參照了登錄的 api 請(qǐng)求方法棒掠，在文件 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,
  });
}

調(diào)用前將 data 轉(zhuǎn)換成 json 數(shù)據(jù)：

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

在后端屁商，只有 method 有值烟很，jsonStringParameter 被“吞”掉了，就象沒(méi)有傳這個(gè)參數(shù)一樣蜡镶，所以雾袱，得到的值是 null。

各種查資料官还，后來(lái)在 fetch 的 github 項(xiàng)目看到芹橡，Post JSON，請(qǐng)求的參數(shù)用的是 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),
  });

記得調(diào)用方也要改：

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

竟然就可以了！

在查詢(xún)數(shù)據(jù)屯伞，以及登錄功能腿箩，都用的是關(guān)鍵字 data，能正常傳遞參數(shù)劣摇，不過(guò)珠移，調(diào)用的是 umi-request 封裝過(guò)的 fetch，umi-request 對(duì)參數(shù)的定義是：

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;
}

后端導(dǎo)出 excel 文件的代碼片斷

// 設(shè)置response頭信息
response.reset();
response.setContentType("application/x-download;charset=UTF-8");

try {
    response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(excelFileName, "UTF-8") + ".xls");
    //創(chuàng)建一個(gè)WorkBook,對(duì)應(yīng)一個(gè)Excel文件
    HSSFWorkbook wb = new HSSFWorkbook();
    //在Workbook中末融，創(chuàng)建一個(gè)sheet钧惧，對(duì)應(yīng)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 版本勾习，導(dǎo)出 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 通用，請(qǐng)參照 v4 的代碼粹舵。
對(duì) 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),
});

關(guān)于作者

• 個(gè)人博客：https://www.lovesofttech.com
• CSDN博客：https://blog.csdn.net/runAndRun
• github: https://github.com/uncleAndyChen
• gitee: https://gitee.com/uncleAndyChen
• 郵箱：andy@lovesofttech.com