如何在Tabulator(SheetJS)中设置导出Excel时用逗号分隔小数

核心思路 #

不要将原始数字转成带逗号的字符串（这会让Excel识别为文本），而是保留原始数值，通过SheetJS给对应单元格设置符合区域要求的数字格式代码，让Excel自动以逗号作为小数分隔符显示，同时维持数值类型。

具体实现步骤 #

1. 表格视图层格式化，保留原始数值 #

在Tabulator列定义中，仅用formatter处理前端显示的逗号格式，不修改原始数据：

{
  title: "数值列",
  field: "value",
  formatter: function(cell) {
    // 前端显示用逗号分隔小数，原始数据仍为数字类型
    return cell.getValue().toLocaleString('de-DE'); // 传入对应区域locale，如德语区默认逗号分隔
  }
}

这样表格视图显示带逗号的格式，但导出时Tabulator会传递原始数字给SheetJS，不会丢失数值类型。

2. 自定义Excel导出的单元格格式 #

利用Tabulator的excelDownloadConfig配置，通过modifyCell钩子给数值列设置Excel数字格式：

var table = new Tabulator("#example-table", {
  // 其他表格配置...
  excelDownloadConfig: {
    modifyCell: function(cell, sheetCell) {
      // 定位需要设置格式的数值列
      if (cell.getField() === "value") {
        // 设置Excel数字格式：根据区域自动适配分隔符，或强制逗号格式
        // 自动适配："#,##0.00000"（Excel会跟随系统区域显示逗号/点）
        // 强制逗号："#.##0,00000"（点为千分分隔符，逗号为小数分隔符）
        sheetCell.z = "#,##0.00000";
      }
    }
  },
});

sheetCell.z是SheetJS设置单元格数字格式的属性，格式代码可根据需求调整小数位数。

3. 统一总计行的格式一致性 #

Tabulator计算行默认可能用区域格式，需确保计算结果为原始数值，同时通过modifyCell统一处理导出格式：

{
  title: "数值列",
  field: "value",
  formatter: function(cell) {
    return cell.getValue().toLocaleString('de-DE');
  },
  bottomCalc: "sum",
  bottomCalcFormatter: function(cell) {
    // 总计行前端显示用逗号格式，原始计算值仍为数字
    return cell.getValue().toLocaleString('de-DE');
  }
}

导出时总计行的数值会被modifyCell钩子设置相同的数字格式，和普通行保持一致。

关键注意点 #

• 禁止将原始数字转成带逗号的字符串导出，否则会丢失数值类型，导致Excel无法进行后续计算。
• Excel的数字格式是单元格属性，不影响数值本身的存储，仅控制显示样式。
• 格式代码可按需调整小数位数，比如#,##0.00对应两位小数显示。

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