Question

我想使用Ag-grid将json数据导出到excel。我希望隐藏Ag网格（在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);
}

使用Ag-grid将JSON导出到excel（csv）

1 个答案: