前后端分离，后端返回文件流，在前端通过请求 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),
});
