Экспорт JSON в Excel (csv) с помощью Ag-grid

Я хочу экспортировать данные json, чтобы преуспеть, используя Ag-grid. Я хочу, чтобы Ag-сетка была скрыта (не видна в пользовательском интерфейсе) и просто имела гиперссылку в пользовательском интерфейсе для загрузки данных в формате Excel.

Определение столбца:

 this.columnDefs = [
        {headerName: "Athlete", field: "athlete", width: 150},
        {headerName: "Age", field: "age", width: 90},
        {headerName: "Country", field: "country", width: 120},
        {headerName: "Year", field: "year", width: 90},
        {headerName: "Date", field: "date", width: 110},
        {headerName: "Sport", field: "sport", width: 110},
        {headerName: "Gold", field: "gold", width: 100},
        {headerName: "Silver", field: "silver", width: 100},
        {headerName: "Bronze", field: "bronze", width: 100},
        {headerName: "Total", field: "total", width: 100}
    ];

Данные:

[{"athlete":"Michael Phelps","age":23,"country":"United States","year":2008,"date":"24/08/2008","sport":"Swimming","gold":8,"silver":0,"bronze":0,"total":8},{"athlete":"Michael Phelps","age":23,"country":"United States","year":2008,"date":"24/08/2008","sport":"Swimming","gold":8,"silver":0,"bronze":0,"total":8},]

Вот ссылка на plunker с кодом.


json angular ag-grid export-to-excel ag-grid-ng2
person RV.    schedule 17.04.2018    source источник
comment
вы смотрели Papa Parse , особенно unparse()   -  person jowey    schedule 17.04.2018

Ответы (1)


arrow_upward
6
arrow_downward

Экспорт в Excel — это корпоративная функция. Однако при отсутствии корпоративной лицензии вы должны иметь возможность вызывать API gridOptions для экспорта данных в файл .csv, который можно открыть в Excel.

Сетку можно скрыть с помощью директивы [hidden].

Адаптировано из API ag-Grid:

<button (click)="onBtnExport()">Download</button>

<ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-balham"
      [hidden]="true"
      [columnDefs]="columnDefs"
      [enableFilter]="true"
      [enableSorting]="true"
      [showToolPanel]="true"
      [rowSelection]="rowSelection"
      [pinnedTopRowData]="pinnedTopRowData"
      [pinnedBottomRowData]="pinnedBottomRowData"
      (gridReady)="onGridReady($event)"></ag-grid-angular>

onBtnExport(): void {
    const params = {
      columnGroups: true,
      allColumns: true,
      fileName: 'filename_of_your_choice',
      columnSeparator: document.querySelector("#columnSeparator").value
    };
    this.gridApi.exportDataAsCsv(params);
}
person Zach Newburgh    schedule 17.04.2018
comment
Спасибо, @Zach, не могли бы вы показать, где и как вы определили объект this.gridApi? - person Benjamin McFerren; 27.08.2018
comment
@БенджаминМакферрен export class EditorComponent implements OnInit, AfterViewInit { @ViewChild('agGrid') agGrid: AgGridNg2; - person mbejda; 28.01.2019
comment
не знаю, почему этот ответ был исключен. Несмотря на отсутствие каких-либо подсказок о том, как использовать метод exportDataAsCsv без API? Все еще на том же месте - person TAHA SULTAN TEMURI; 02.10.2019
comment
для меня это сработало. Использовал вот так. @ViewChild('agGrid') agGrid: любой; this.agGrid.api.exportDataAsCsv (параметры); - person Mendon Ashwini; 23.02.2021