在 angular slickgrid 中导出没有分组选项的 Excel 文件

如何解决在 angular slickgrid 中导出没有分组选项的 Excel 文件

我在 angular slickgrid 中启用了带有分组选项的 excel 导出功能。没有分组数据，导出的文件以表格形式显示数据。在 slickgrid 中对数据进行分组时，导出的文件形成了分组样式。所以我无法以表格样式查看数据。 强调文本我想以表格样式导出数据。请帮助我实现这一目标。

附上示例截图

使用分组导出文件

预期的文件外观

示例代码

 gridOptions: GridOption = {
    enableAutoSizeColumns: false,autoFitColumnsOnFirstLoad: false,autoCommitEdit: true,enablePagination: true,pagination: {  // Pagination UI - Item per page select options for default pagintation
        pageSizes: [10,15,20,25,50,75,100],pageSize: 25
    },autoEdit: false,rowHeight: 40,headerRowHeight: 40,enableCellNavigation: true,editable: true,enableAutoResize: true,enableSorting: true,enableFiltering: true,enableExcelExport: true,enableExport: true,i18n: this.translateService,gridMenu: {
        hideExportExcelCommand: true,hideExportCsvCommand: true,customItems: [{
            command: "cspfm-excel-export",titleKey: "EXPORT_TO_EXCEL",iconCssClass: "fa fa-file-excel-o",action: (event,callbackArgs) => {
                this.excelExport(event,callbackArgs)
            }
        },{
            command: "cspfm-csv-export",titleKey: "EXPORT_TO_CSV",iconCssClass: "fa fa-download",{ divider: true,command: '',positionOrder: 90 },{
            command: "cspfm-appm-guide-fetch-mode-fully",titleKey: "Full fetch",iconCssClass: "icon-mat-explore",callbackArgs) => {
                this.dataFetchMode = 'Full';
                this.fetchModeChanged()
            },positionOrder: 91
        },{
            command: "cspfm-appm-guide-fetch-mode-batch",titleKey: "Batchwise fetch",iconCssClass: "icon-mat-autorenew",callbackArgs) => {
                this.dataFetchMode = 'Batch';
                this.fetchModeChanged()
            },positionOrder: 92
        },{
            command: "cspfm-appm-guide-fetch-mode-action",titleKey: "On click batchwise",iconCssClass: "icon-mat-touch_app",callbackArgs) => {
                this.dataFetchMode = 'OnClickBatch';
                this.fetchModeChanged()
            },positionOrder: 93
        },{
            command: "cspfm-toggle-pagination",titleKey: "Toggle pagination",iconCssClass: "fa fa-bookmark",callbackArgs) => {
                this.togglePagination(event,callbackArgs)
            },positionOrder: 94
        },{
            command: "cspfm-groupby",titleKey: "Group-by",iconCssClass: "icon-mat-account_tree",callbackArgs) => {
                this.openDraggableGroupingRow()
            },positionOrder: 95
        },{
            command: "cspfm-clear-groupby",titleKey: "Clear Grouping",iconCssClass: "fa fa-times",callbackArgs) => {
                this.clearGrouping()
            },positionOrder: 96
        }
        ]
    },enableAutoTooltip: true,autoTooltipOptions: {
        enableForCells: true,enableForHeaderCells: true,maxToolTipLength: 1000
    },headerMenu: {
        hideColumnHideCommand: true
    },autoResize: {
        containerId: this.gridContainerId,calculateAvailableSizeBy: 'container'
    },exportOptions: {
        exportWithFormatter: true
    },excelExportOptions: {
        exportWithFormatter: true,},enableTranslate: true,presets: {
        sorters: [{ columnId: this.tableColumnInfo['insitute']['institutename_7']['prop'],direction: 'ASC' }],enableAsyncPostRender: true,// for the Angular PostRenderer,don't forget to enable it
    asyncPostRenderDelay: 0,// also make sure to remove any delay to render it
    params: {
        angularUtilService: this.angularUtilService // provide the service to all at once (Editor,Filter,AsyncPostRender)
    },enableDraggableGrouping: true,createPreHeaderPanel: true,showPreHeaderPanel: false,preHeaderPanelHeight: 40,draggableGrouping: {
        dropPlaceHolderText: 'Drop a column header here to group by the column',deleteIconCssClass: 'fa fa-times',onGroupChanged: (e,args) => this.onGroupChanged(e,args),onExtensionRegistered: (extension) => {
            this.draggableGroupingPlugin = extension
        }
    },};

 **excelExport(event,callbackArgs)** {
  
    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
        this.draggableGroupingPlugin.clearDroppedGroups();
     
        this.gridOptions['autoFitColumnsOnFirstLoad'] = true
        this.gridObj.setOptions(this.gridOptions);
    }
    var fileType = FileType.xlsx;
    var displayFileType;
    if (callbackArgs['command'] == 'cspfm-excel-export') {
        fileType = FileType.xlsx;
        displayFileType='Excel ';
    } else if (callbackArgs['command'] == 'cspfm-csv-export') {
        fileType = FileType.csv;
        displayFileType='CSV ';
    }
    const cspfmGridCustomData = callbackArgs['grid']['cspfm_grid_custom_data']
    if (cspfmGridCustomData) {
        const pageTitle = cspfmGridCustomData['page_title_key']
        const objectName = cspfmGridCustomData['object_display_name']

        this.presentToast("Export to " + displayFileType + "initiated");

        return this.translateService.get(pageTitle).subscribe(res => {
            var filename = res;
            if (objectName) {
                filename = res + " - " + objectName;
            }
            var options = {
                filename: filename,format: fileType
            }
            if (callbackArgs['command'] == 'cspfm-excel-export') {
                return cspfmGridCustomData['angular_grid_excel_export_service_instance'].exportToExcel(options).catch(error => {
                    this.showAlert(error.message);
                    return error;
                });
            } else {
                options['delimiter'] = (fileType === FileType.csv) ? DelimiterType.comma : DelimiterType.tab;
                return cspfmGridCustomData['angular_grid_export_service_instance'].exportToFile(options).catch(error => {
                    this.showAlert(error.message);
                    return error;
                });
            }
        })
    }
}