前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ant Design Pro实现导出Excel

Ant Design Pro实现导出Excel

作者头像
Wyc
发布2019-07-01 10:07:41
3K0
发布2019-07-01 10:07:41
举报
文章被收录于专栏:Python研发

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();
    };
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-06-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • react Ant Design ProUI框架导出Excel(只能导出当前列表数据)
    • 插件安装
      • 安装完成之后开始引入
        • 使用
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档