react获取数据导出到excel

数据从接口获取,执行导出的方法

下载插件 js-export-excel

npm install js-export-excel

or

yarn add js-export-excel

//导出为excel文件的方法
    const downloadFileToExcel = () => {
        let option = {}, //option代表的就是excel文件
            dataTable = [],  //excel文件中的数据内容
            arr = dataSource;//获取数据源
        let firstCol = { '日期': "2020/9/20-2020/9/25", '报表日期': "2020/9/25" }
        dataTable.push(firstCol);
        if (arr && arr.length > 0) {
            for (let i in arr) {  //循环获取excel中每一行的数据
                // let _planDay = formatTime(arr[i].planDay, true);  //格式化日期（自定义方法）
                let obj = {
                    '序号': i * 1 + 1,
                    '品类': arr[i].category_name,
                    '面料编号': arr[i].fabric_sn,
                    '面料成分': arr[i].composition,
                    '件数': arr[i].quantity,
                    '尺码': arr[i].size,
                    '款式描述': arr[i].style_describe,
                    '工艺要求': arr[i].technic_describe,
                    '面料费': arr[i].fabric_fee,
                    '成衣费': arr[i].clothes_fee,
                    '交期': arr[i].delivery,
                    '备注': arr[i].remark,
                    '图片': arr[i].image,
                }
                dataTable.push(obj);  //设置excel中每列所获取的数据源
            }
        }
        option.fileName = '样品信息表';  //excel文件名称
        option.datas = [
            {
                sheetData: dataTable,  //excel文件中的数据源
                sheetName: '样品信息报表',  //excel文件中sheet页名称
                sheetFilter: [
                    '序号', '品类', '面料编号', '面料成分', '件数', '尺码', '款式描述', '工艺要求', '面料费', '成衣费', '交期', '备注', '图片'
                ],  //excel文件中需显示的列数据
                sheetHeader: [
                    '序号', '品类', '面料编号', '面料成分', '件数', '尺码', '款式描述', '工艺要求', '面料费', '成衣费', '交期', '备注', '图片'
                ],  //excel文件中每列的表头名称
                // columnWidths : [5, 5] //列宽 需与列顺序对应
            },
            {
                sheetData: dataTable,  //excel文件中的数据源
                sheetName: '业务详情报表',  //excel文件中sheet页名称
                sheetFilter: ['序号', '品类', '面料编号', '面料成分', '件数', '尺码', '款式描述', '工艺要求', '面料费', '成衣费', '交期', '备注', '图片'],  //excel文件中需显示的列数据
                sheetHeader: ['序号', '品类', '面料编号', '面料成分', '件数', '尺码', '款式描述', '工艺要求', '面料费', '成衣费', '交期', '备注', '图片'],  //excel文件中每列的表头名称
                // columnWidths : [5, ""] //列宽 需与列顺序对应
            }
        ]
        let toExcel = new ExportJsonExcel(option);  //生成excel文件

        toExcel.saveExcel();  //下载excel文件
    }
 <Button type="primary" onClick={downloadFileToExcel} style={{ marginBottom: "15px" }}>下载</Button>