最近React项目中用到了导出功能,网上搜索一番后决定采用Blob方式(推荐)来实现,现分享下具体实现步骤。
我主要采用后端生成excel文件流返回给前端来实现的,具体代码如下:
@RequestMapping(value = "/download")
public void export(HttpServletRequest request,
HttpServletResponse resp) {
HSSFWorkbook book = new HSSFWorkbook();
try {
HSSFSheet sheet = book.createSheet("mySheent");
String[] headers = {"用户ID", "邮箱账号","昵称","年龄","性别","状态", "注册时间"};
HSSFRow row = sheet.createRow(0);
for (short i = 0; i < headers.length; i++) {
//创建单元格,每行多少数据就创建多少个单元格
HSSFCell cell = row.createCell(i);
HSSFRichTextString text = new HSSFRichTextString(headers[i]);
//给单元格设置内容
cell.setCellValue(text);
}
resp.setContentType("application/vnd.ms-excel;charset=utf-8");
resp.setHeader("Content-Disposition", "attachment;filename="+ new String(("Excel.xls").getBytes(), "iso-8859-1"));
book.write(resp.getOutputStream());
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
这里需要注意的地方有两个:
resp.setContentType("application/vnd.ms-excel;charset=utf-8");
resp.setHeader("Content-Disposition", "attachment;filename="+ new String(("Excel.xls").getBytes(), "iso-8859-1"));
第一行application/vnd.ms-excel说明将结果导出为Excel
第二行说明提供那个打开/保存对话框,将文件作为附件下载
上面就是后台的全部代码了,接下来看一下前端的代码:
//service.js
import { request } from 'utils/request';
export async function exportExcel(params){
var reqBody = {
url: "/download",
method: 'post',
config:{
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
responseType: 'blob',
},
data:{
...params
}
}
return request(reqBody);
}
这里为了方便做记录,我是直接在页面中使用axios发送了个post请求。
仔细看axios请求加了个responseType: 'blob'
配置,这是很重要的
请求成功后返回了一个Blob对象,你如果没有正确的加上responseType: 'blob’这个参数,返回的就不是个Blob对象,而是字符串了。
接下来就是将返回的Blob对象下载下来了:
//model.js
import { exportExcel } from 'services/service';
export default {
namespace: 'softphone',
state: {
data:[],
},
reducers: {
search(state, {payload}) {
//console.log("<<<<<<<<payload:",payload);
return {...state, ...payload};
},
},
effects:{
*exportReport({ payload }, { call, put }) {
try {
let response = yield call(exportExcel, payload);
console.log('--------------response-------', response);
if (response.statusCode === 200) {
var blob = new Blob([response.obj], {type: 'application/vnd.ms-excel;charset=utf-8'})
var url = window.URL.createObjectURL(blob);
var aLink = document.createElement("a");
aLink.style.display = "none";
aLink.href = url;
aLink.setAttribute("download", "用户列表.xls");
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
}
} catch (error) {
console.error(error);
}
},
},
};
以上就是React导出Excel的全部代码,写的比较仓促,台风来了赶紧下班,有问题欢迎留言讨论~~~~~
关于service.js中request从哪来的,请参照我上一篇博文https://mp.csdn.net/postedit/98982974