angular - 导出excel文件而不在角度slickgrid中分组选项

Question

我已经在 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",
            action: (event, callbackArgs) => {
                this.excelExport(event, callbackArgs)
            }
        },
        { divider: true, command: '', positionOrder: 90 },
        {
            command: "cspfm-appm-guide-fetch-mode-fully",
            titleKey: "Full fetch",
            iconCssClass: "icon-mat-explore",
            action: (event, callbackArgs) => {
                this.dataFetchMode = 'Full';
                this.fetchModeChanged()
            },
            positionOrder: 91
        }, {
            command: "cspfm-appm-guide-fetch-mode-batch",
            titleKey: "Batchwise fetch",
            iconCssClass: "icon-mat-autorenew",
            action: (event, callbackArgs) => {
                this.dataFetchMode = 'Batch';
                this.fetchModeChanged()
            },
            positionOrder: 92
        }, {
            command: "cspfm-appm-guide-fetch-mode-action",
            titleKey: "On click batchwise",
            iconCssClass: "icon-mat-touch_app",
            action: (event, callbackArgs) => {
                this.dataFetchMode = 'OnClickBatch';
                this.fetchModeChanged()
            },
            positionOrder: 93
        }, {
            command: "cspfm-toggle-pagination",
            titleKey: "Toggle pagination",
            iconCssClass: "fa fa-bookmark",
            action: (event, callbackArgs) => {
                this.togglePagination(event, callbackArgs)
            },
            positionOrder: 94
        },
        {
            command: "cspfm-groupby",
            titleKey: "Group-by",
            iconCssClass: "icon-mat-account_tree",
            action: (event, callbackArgs) => {
                this.openDraggableGroupingRow()
            },
            positionOrder: 95
        }, {
            command: "cspfm-clear-groupby",
            titleKey: "Clear Grouping",
            iconCssClass: "fa fa-times",
            action: (event, 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;
                });
            }
        })
    }
}

标签： angularslickgridangular-slickgrid