使用 Ag-grid 将 JSON 导出到 excel (csv)

Question

我想使用 Ag-grid 将 json 数据导出到 excel。我想保持 Ag-grid 隐藏（在 UI 上不可见），只在 UI 上有超链接以下载 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 链接。

Answer 1

导出到 Excel 是一项企业功能。但是，在没有企业许可证的情况下，您应该可以调用 gridOptions API 将数据导出为 .csv，该文件可以在 Excel 中打开。

可以使用[hidden] 指令隐藏网格。

改编自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);
}