react Ant Design ProUI框架导出Excel

2020-11-30   


转自:https://www.cnblogs.com/wuyongcong/p/11106942.html

安装插件

yarn add js-export-excel

导入插件

import ExportJsonExcel from "js-export-excel"

使用插件

<Button onClick={this.exportExcel}>导出</Button>


//  只能导出当前table中的数据,如果分页则无法进行导出,需要后端配合
handleExport = () => {
     const { ReqDetailList } = this.props;    // 数据
     const{columns} = this.state;      // Table的 Columns
     const option = {};
 
     option.fileName = 'excel';   // 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();
 };

Q.E.D.