reactjs - 如何在 ej2 Syncfusion React 数据网格中导出详细行（到 PDF 和 Excel）？

Question

我想将数据从 ej2 syncfusion react 数据网格导出到 Excel 和 PDF，但现有数据有一些与每一行相关的详细信息。我想将以下带有详细数据的数据导出到 Excel 和 PDF 中。有没有办法在ej2 Syncfusion React Data Grid中导出带有详细行的网格？我尝试在导出属性中使用 hierarchyExportMode，但它无法导出详细信息行，仅导出行中的主要数据。

这是我要导出 示例图片的数据：

import React from 'react';
import { Layout } from 'antd';
import dummyParrent from '../../../../dataDummy4.json';
import dummyAnak from '../../../../dataDummy5.json';

import {
    GridComponent,
    ColumnDirective,
    ColumnsDirective,
    Page,
    Inject,
    Toolbar,
    PdfExport,
    Grid,
    ExcelExport,
    Filter,
    DetailRow,
} from '@syncfusion/ej2-react-grids'

import { DataManager, Query } from '@syncfusion/ej2-data';

const Laporan = () => {
    const { Content } = Layout;

    let grid = Grid | null;

    const dataParrent = dummyParrent.map((dt, index) => {
        return ({
            no: index + 1,
            id_team: dt.id_team,
            nama_team: dt.nama_team,
            adviser: dt.adviser
        })
    })

    const dataAnak = dummyAnak.map((dt) => {
        return ({
            id: dt.id,
            nama: dt.nama,
            umur: dt.umur,
            col_dum: dt.col_dum,
            id_team: dt.id_team

        })
    })

    const detailData = (e) => {

        const selectData = new DataManager(dataAnak).executeLocal(new Query().where("id_team", "equal", e.data.id_team, false));

        const detail1 = new Grid({
            dataSource: selectData,
            columns: [
                { field: 'id', headerText: 'Id ', width: 100 },
                { field: 'nama', headerText: 'Nama', width: 100 },
                { field: 'umur', headerText: 'Umur', width: 100 },
                { field: 'col_dum', headerText: 'Col_dum', width: 100 },
                { field: 'id_team', headerText: 'Id Team', width: 100 }
            ]
        });

        const detail2 = new Grid({
            dataSource: selectData,
            columns: [
                { field: 'id', headerText: 'Id ', width: 100 },
                { field: 'nama', headerText: 'Nama', width: 100 },
                { field: 'umur', headerText: 'Umur', width: 100 },
                { field: 'col_dum', headerText: 'Col_dum', width: 100 },
                { field: 'id_team', headerText: 'Id Team', width: 100 }
            ]
        });
        detail1.appendTo(e.detailElement.querySelector('.custom-grid1'));
        detail2.appendTo(e.detailElement.querySelector('.custom-grid2'));
    }

    const gridTemplate = () => {

        return (
            <div className='mt-2'>
                <div className='mb-2'>
                    <b>Detail Data 1</b>
                    <div className='custom-grid1'></div>
                </div>
                <div className=''>
                    <b>Detail Data 2</b>
                    <div className='custom-grid2'></div>
                </div>
            </div>
        );
    }

    const toolbarClick = (args) => {
        if (grid) {
            if (args.item.id.includes('excelexport')) {
                grid.excelExport({
                    fileName: 'ExportHirarki.xlsx',
                    hierarchyExportMode: 'All',
                    }
                })
            } else if (args.item.id.includes('pdfexport')) {
                grid.pdfExport({
                    fileName: 'ExportHirarki.pdf',
                    hierarchyExportMode: 'All',
                    pageSize: 'A4',
                    pageOrientation: 'Landscape'
                })
            }
        }
    }

    const pdfHeaderQueryCellInfo = (PdfHeaderQueryCellInfoEventArgs) => {
        PdfHeaderQueryCellInfoEventArgs.cell.row.pdfGrid.repeatHeader = true;
    }

    return (
        <Content className='konten'>
            <div>
                <div className='mt-2'><b>First Grid</b></div>
                <GridComponent
                    dataSource={dataParrent}
                    ref={g => grid = g}
                    allowPaging={true}
                    toolbar={['PdfExport', 'ExcelExport', 'Search']}
                    allowPdfExport={true}
                    allowExcelExport={true}
                    allowFiltering={true}
                    filterSettings={{ type: 'Excel' }}
                    toolbarClick={toolbarClick}
                    pdfHeaderQueryCellInfo={pdfHeaderQueryCellInfo}
                    gridLines='Both'
                    width='auto'
                    dataBound={() => {
                        grid.detailRowModule.expandAll()
                    }}
                    detailDataBound={detailData}
                    detailTemplate={gridTemplate}
                >
                    <ColumnsDirective>
                        <ColumnDirective field='no' headerText='No' textAlign='Left' headerTextAlign='Center' width='120' />
                        <ColumnDirective field='id_team' headerText='Id Team' textAlign='Left' headerTextAlign='Center' width='120' />
                        <ColumnDirective field='nama_team' headerText='Nama Team' textAlign='Left' headerTextAlign='Center' width='120' />
                        <ColumnDirective field='adviser' headerText='Adviser' textAlign='Left' headerTextAlign='Center' width='150' />
                    </ColumnsDirective>
                    <Inject services={[Page, Toolbar, PdfExport, ExcelExport, Filter, DetailRow]} />
                </GridComponent>
            </div>
        </Content>
    );
};

export default Laporan;

这是dataDummy4.json：

[
    {
        "id_team": "1",
        "nama_team": "IYO A",
        "adviser": "Dummy"
    },
    {
        "id_team": "2",
        "nama_team": "IYO B",
        "adviser": "Dummy"
    },
    {
        "id_team": "1",
        "nama_team": "IYO C",
        "adviser": "Dummy"
    },
    {
        "id_team": "2",
        "nama_team": "IYO D",
        "adviser": "Dummy"
    }
]

和dataDummy5.json：

[
    {
        "id_team": "1",
        "id": "5",
        "nama": "Child 1",
        "umur": "22",
        "status": "Single 1",
        "col_dum": "Hellow World"
    },
    {
        "id_team": "2",
        "id": "6",
        "nama": "Child 2",
        "umur": "25",
        "status": "Single 2",
        "col_dum": "Hellow World"
    },
    {
        "id_team": "2",
        "id": "7",
        "nama": "Child Baru",
        "umur": "25",
        "status": "Single Baru",
        "col_dum": "Hellow World"
    }
]