Export JSON to excel (csv) using Ag-grid

Question

I want to export the json data to excel using Ag-grid. I want to keep the Ag-grid hidden(not-visible on UI) and just have the hyper link on UI to download the data in excel format.

Column Definition:

 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}
    ];

Data:

[{"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},]

Here is the plunker link with code.

did you have a look at Papa Parse , especially unparse()

jowey
– jowey

2018-04-17 19:15:51 +00:00
Commented Apr 17, 2018 at 19:15 — jowey
– jowey, Commented Apr 17, 2018 at 19:15

Zach Newburgh · Accepted Answer · 2018-04-17 21:31:15Z

6

Exporting to Excel is an enterprise feature. However, in absence of an enterprise license, you should be able to call the gridOptions API to export the data to a .csv, which can be opened in Excel.

The grid can be hidden using the [hidden] directive.

Adapted from the ag-Grid API:

<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);
}

answered Apr 17, 2018 at 21:31

Zach Newburgh

5643 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Benjamin McFerren Over a year ago

Thanks @Zach can you please show where / how you defined this.gridApi object?

mbejda Over a year ago

@BenjaminMcFerren export class EditorComponent implements OnInit, AfterViewInit { @ViewChild('agGrid') agGrid: AgGridNg2;

TAHA SULTAN TEMURI Over a year ago

dont know why this answer was excepted Inspite of not providing any clues about how did use exportDataAsCsv method without api ?still on same place

Naik Ashwini Over a year ago

for me this worked. Used it like this. @ViewChild('agGrid') agGrid: any; this.agGrid.api.exportDataAsCsv(params);

Collectives™ on Stack Overflow

Export JSON to excel (csv) using Ag-grid

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related