react Ant Design ProUI框架导出Excel(只能导出当前列表数据)
插件安装
代码语言:javascript复制npm install js-export-excel
安装完成之后开始引入
代码语言:javascript复制import ExportJsonExcel from "js-export-excel"
使用
代码语言:javascript复制<Button onClick={this.exportExcel}>导出</Button>
调用
代码语言:javascript复制 handleExport = () => {
const { ReqDetailList } = this.props; // 网络请求命名空间
const{columns} = this.state; // 需要放在state里边,Table,Columns
const option = {};
option.fileName = 'excel';
option.datas = [
{
sheetData: ReqDetailList.data.map(item => {
const result = {};
columns.forEach(c => {
result[c.dataIndex] = item[c.dataIndex];
});
return result;
}),
sheetName: 'ExcelName', // Excel文件名称
sheetFilter: columns.map(item => item.dataIndex),
sheetHeader: columns.map(item => item.title),
columnWidths: columns.map(() => 10),
},
];
const toExcel = new ExportJsonExcel(option);
toExcel.saveExcel();
};