美文网首页
react+antd实现前端导出为excel功能

react+antd实现前端导出为excel功能

作者: 园Smile | 来源:发表于2020-05-28 10:49 被阅读0次

    使用js-export-excel

    安装插件

    npm i js-export-excel

    在需要的地方引入该模块

    import ExportJsonExcel from 'js-export-excel';//excel表格导出

    给导出按钮绑定事件

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

    生成excel的代码

    //数据导出

        exportExcel = () => {

            const datas = this.state.data ? this.state.data : '';//表格数据

            var option = {};

            let dataTable = [];//新建数组放数据

            console.log(datas)

            if (datas) {

                for (const data of datas) {

                    console.log(data)

                    if (data) {

                        let obj = {

                            id: data.classid,

                            name: data.classname,

                        }

                        dataTable.push(obj);

                    }

                }

            }

            console.log(dataTable)

            option.fileName = '班级信息'//文件名

            option.datas = [

                {

                    sheetData: dataTable,//数据

                    sheetName: '班级信息',//sheet名字

                    // sheetFilter: [dataTable.id, dataTable.name],//列过滤

                  // sheetFilter 列过滤(只有在 data 为 object 下起作用)(可有可无)

                    sheetHeader: ["班级编号","班级名称"],//// 第一行

                }

            ];

            var toExcel = new ExportJsonExcel(option);

            toExcel.saveExcel();//保存

        }

    详情可以参考官方文档:https://github.com/cuikangjie/js-export-excel

    相关文章

      网友评论

          本文标题:react+antd实现前端导出为excel功能

          本文链接:https://www.haomeiwen.com/subject/dzeoahtx.html