我想使用 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链接代码。
最佳答案
导出到 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);
}
关于json - 使用 Ag-grid 将 JSON 导出到 excel (csv),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49885722/