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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM