在 ag-grid 上使用正确的单元格格式导出到 excel
Posted
技术标签:
【中文标题】在 ag-grid 上使用正确的单元格格式导出到 excel【英文标题】:Exporting to excel with proper cell formatting on ag-grid 【发布时间】:2018-01-29 04:49:09 【问题描述】:当我使用 ag-grid 自己的 exportDataAsExcel()
将表格导出到 excel 时,生成的 excel 包含日期为 General 数据类型,而不是 Date。
[]
我用过这个:
exportDataAsExcel(
processCellCallback: (col, val) => ( /*date value formatting here*/ )
)
用正确的日期格式(DD/MM/YYYY)
格式化Date
,string
但我不能让excel正确地将这些单元格识别为日期而不是常规
这可以通过他们网站上的 excel 导出示例重现:https://www.ag-grid.com/javascript-grid-excel/?framework=all#gsc.tab=0
【问题讨论】:
【参考方案1】:我也使用此代码在 Excel 中应用值格式化程序:
this.gridOptions.api.exportDataAsExcel(
processCellCallback: (params) =>
const colDef = params.column.getColDef()
// try to reuse valueFormatter from the colDef
if (colDef.valueFormatter)
const valueFormatterParams: ValueFormatterParams =
...params,
data: params.node.data,
node: params.node!,
colDef: params.column.getColDef()
;
return colDef.valueFormatter(valueFormatterParams);
return params.value;
,
);
【讨论】:
【参考方案2】:你需要做三件事:
实例化Ag-Grid时,需要添加(感谢another user's answer elsewhere)
let excelStyles = [
id: "ExcelDateTime",
dataType: "dateTime",
numberFormat: format: "yyyy-mm-dd hh:mm:ss;;;"
,
id: "ExcelDate",
dataType: "dateTime",
numberFormat: format: "yyyy-mm-dd;;;"
];
...
<AgGridReact
... //such as rowData=rowData
excelStyles=excelStyles
...
/>;
对于日期列:
colDef.cellClass = "ExcelDateTime";
或
colDef.cellClass = "ExcelDate";
视情况而定,并且
在您的 processCellCallback
中,将日期格式化为 ISO 日期:"yyyy-mm-ddTHH:MM:ss"
【讨论】:
我以为我已经找到了这个问题的答案,但我意识到它并不能始终如一地工作。这个特定的答案花了我一段时间才弄清楚……但是在阅读了文档并使其工作之后……这就是答案。谢谢。 plnkr.co/edit/?p=preview&preview 和这里:ag-grid.com/angular-grid/excel-export 。这是最终让所有点击的行:“银色列具有 dataType=string 的样式。”再次感谢 谢谢!在 agGrid 的网站上,它说 dataType 应该是“DateTime”,而不是“dateTime”。哪个是真的?我已经尝试了这两种方法,但我仍然将我的 ISO 格式的日期导出为数据类型 General。 ag-grid.com/angular-data-grid/excel-export-data-types @MikeGledhill:上面的代码是从实际工作的男女同校中剪切和粘贴的。 我刚刚注意到,如果使用 agGrid 自己网站上的示例代码,我会收到大量警告:“无法识别用于 excel 导出的数据类型 [excelDate.dataType=DateTime]”所以,是的,你绝对确实需要将dataType设置为“dateTime”(小写D) @DavidI.McIntosh 不 - 抱歉,我只是感到困惑,因为 agGrid 自己的代码示例(在我引用的链接中)是错误的。我不确定要信任哪个版本....是的,您的版本是正确的(带有小写的“dateTime”,而不是“DateTime”)。【参考方案3】:假设您可以控制服务器端应用程序,我发现从服务器端导出任何重要的导出/格式化都更容易。
通过在服务器上执行此操作,您可以完全控制数据和 Excel 文件的生成,并且不受 Ag-Grid 实施的限制。
【讨论】:
不是一个真正的答案。这应该是最好的评论以上是关于在 ag-grid 上使用正确的单元格格式导出到 excel的主要内容,如果未能解决你的问题,请参考以下文章
Angular Ag-grid(值获取器不导出单元格的渲染值)
单击日期选择器时,单元格编辑器上的 Ag-grid Angular Material Datepicker 失去焦点