使用 ag 网格在 Angular2 上渲染 excel 表答案

【问题标题】：Render an excel sheet on Angular2 using ag grid使用 ag 网格在 Angular2 上渲染 excel 表
【发布时间】：2018-05-24 18:46:58
【问题描述】：

我必须在 angulart2 项目的 ag 网格中呈现 excel 表。数据将以 excel 表的形式显示，其中列将是 excel A、B、C 等中最大使用的列。并且行将是excel 1,2,3..等中使用的最大行数。工作表中的每个单元格都有自己独特的样式和数据。如何在 ag 网格中渲染这样的网格，我将分别设置每个单元格样式而没有任何性能滞后？

【问题讨论】：

标签： excel angular ag-grid

【解决方案1】：

有一个使用 ag-grid 和 sheetJS 渲染 excel 表格的好例子，它应该为您提供所需的所有选项：

https://www.ag-grid.com/javascript-grid-excel/?framework=javascript#example-custom-xlsx&gsc.tab=0

【讨论】：

谢谢，但上面的示例是用于将网格数据渲染到 excel 中。但是，我需要在 ag-grid 中加载 excel 工作表的逻辑。这是通过将工作表列和行信息作为列和行定义传递给 ag-grid 并传递行数据中的所有样式信息来实现的，以便可以在单元格渲染器中访问它以在 ag-grid 中应用单个单元格样式。
示例行数据：this.rowData = [ { "0": { "Text": "1", "BackgroundColor": "", "BackgroundColor2": "", "BottomBorder": null , "TopBorder": null, "LeftBorder": null, "RightBorder": null },
示例列 def: this.columnDefs.push({ "Id": element.Id, headerName: element.headerName, "field": element.field, cellRenderer: function (params) { console. log(params.value); params.eGridCell.style.backgroundColor = params.value.BackgroundColor; params.eGridCell.style.borderBottomWidth = params.value.BottomBorder; return params.value.Text }