Webix导出Excel如何自定义单元格输出内容？

问题场景 #

我用以下代码导出datatableTab的数据：

webix.toExcel($$("datatableTab"), {
  filename: "Data_Diff",
  name: "Name"
});

导出时会包含数据表所有内容，但部分单元格的数据格式是这样的：

"<span style='color:blue;'>00000000</span><span style='color:LimeGreen;'>000300EE</span>"

我希望这类单元格在Excel里显示为LHS:00000000,RHS:000300EE。试过加filterHTML:true参数，导出后变成了00000000000300EE，请问怎么自定义Excel的单元格输出？

解决方法 #

方法1：全局处理所有列（用parseValue回调） #

在toExcel的配置里添加parseValue函数，专门解析包含<span>标签的单元格内容：

webix.toExcel($$("datatableTab"), {
  filename: "Data_Diff",
  name: "Name",
  parseValue: function(value, column, record){
    // 判断值是否包含HTML span标签
    if (typeof value === "string" && value.includes("<span")) {
      // 提取两个span里的文本内容
      const spans = value.match(/<span[^>]*>([^<]+)<\/span>/g);
      if (spans && spans.length === 2) {
        const lhs = spans[0].replace(/<[^>]+>/g, "");
        const rhs = spans[1].replace(/<[^>]+>/g, "");
        return `LHS:${lhs},RHS:${rhs}`;
      }
    }
    // 其他内容保持原样输出
    return value;
  }
});

方法2：针对特定列处理（用列定义的exportValue） #

如果只有特定列有这种HTML格式的数据，可以在DataTable的列定义里设置exportValue，直接从原始数据取值（比解析HTML更可靠）：

// 假设你的DataTable列定义中有一列id为"diffColumn"
webix.ui({
  view:"datatable",
  id:"datatableTab",
  columns:[
    // 其他列配置...
    { 
      id:"diffColumn", 
      header:"差异数据", 
      template:function(obj){
        // 页面上的渲染模板
        return `<span style='color:blue;'>${obj.lhs}</span><span style='color:LimeGreen;'>${obj.rhs}</span>`;
      },
      // 导出时自定义输出内容
      exportValue:function(obj){
        return `LHS:${obj.lhs},RHS:${obj.rhs}`;
      }
    }
  ]
});

// 导出代码无需额外修改
webix.toExcel($$("datatableTab"), {
  filename: "Data_Diff",
  name: "Name"
});

两种方法的区别 #

• 方法1适合全局统一处理所有列中的HTML格式单元格，不管是哪一列，只要匹配格式就会被处理。
• 方法2更精准，只针对指定列生效，而且如果原始数据本身就存储了拆分后的lhs和rhs字段，这种方式避免了HTML解析可能出现的异常，更稳定。

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