Ant Design Pro实现导出Excel

最新推荐文章于 2023-09-01 18:08:39 发布

川西第一猿

最新推荐文章于 2023-09-01 18:08:39 发布

阅读量877

点赞数

分类专栏： REACT 文章标签： reactjs javascript

本文链接：https://blog.youkuaiyun.com/qq_43278570/article/details/107795116

版权

REACT 专栏收录该内容

1 篇文章

订阅专栏

Ant Design Pro实现导出Excel
react Ant Design ProUI框架导出Excel（只能导出当前列表数据）
友情链接： http://www.sucaishouji.cn/

插件安装

npm install js-export-excel

安装完成之后开始引入

import ExportJsonExcel from "js-export-excel"

使用

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

调用

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