Tabulator 5.4导出XLSX时格式丢失问题求助

一、货币格式导出修复 #

Tabulator默认导出会优先使用单元格原始数据，而非前端渲染后的格式化内容，所以需要针对性配置导出规则：

方法1：输出带格式文本（纯显示） #

在列定义中添加exportFormatter，确保导出内容包含$符号：

{
  title: "金额",
  field: "amount",
  formatter: "money", // 前端显示的货币格式
  exportFormatter: function(cell) {
    return "$" + cell.getValue().toFixed(2); // 导出时附加$符号
  }
}

方法2：配置Excel原生货币格式（推荐） #

通过xlsxFormat设置Excel的单元格格式代码，让导出的数值保持可计算性，同时显示货币样式：

{
  title: "金额",
  field: "amount",
  formatter: "money",
  xlsxFormat: {
    numFmt: "$#,##0.00" // Excel标准货币格式代码
  }
}

二、背景色导出修复 #

Tabulator默认不导出前端单元格样式，需通过xlsxStyler回调自定义导出样式：

1. 动态条件设置背景色 #

在导出配置中添加xlsxStyler，根据单元格数据或字段设置样式：

table.download("xlsx", "数据导出.xlsx", {
  xlsxStyler: function(cell, row, col, data) {
    const style = {};
    // 示例：金额大于1000的单元格设红色背景
    if (cell.getField() === "amount" && cell.getValue() > 1000) {
      style.fill = {
        fgColor: { rgb: "FFFF0000" } // Excel RGB格式需去掉#，大写
      };
    }
    return style;
  }
});

2. 列固定背景色配置 #

如果是列默认的背景色，可直接在列定义中通过xlsxFormat设置：

{
  title: "状态",
  field: "status",
  formatter: function(cell) {
    cell.getElement().style.backgroundColor = "#E8F4F8"; // 前端显示背景色
    return cell.getValue();
  },
  xlsxFormat: {
    fill: {
      fgColor: { rgb: "E8F4F8" } // 对应Excel的RGB值（去掉#）
    }
  }
}

三、关键注意事项 #

• accessFormatter用于修改导出的原始数据结构，而非显示样式，所以之前使用它无效是正常的。
• 确保已引入Tabulator的XLSX导出扩展文件（tabulator-xlsx.js），样式导出依赖该扩展的完整功能。
• Excel识别的RGB格式需去掉#符号，且字母为大写。

内容的提问来源于stack exchange，提问作者Darshil Bhavsar