在 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) 格式化Datestring 但我不能让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 失去焦点

C#winform怎么导出一维码到EXCEL单元格?

角度的ag-grid中的单元格渲染问题

AG-Grid:如何根据同一行中其他单元格中的值更改单元格的颜色

c#导出EXCEL合并单元格代码