HTML元素单元格：用自定义 CellType 扩展 SpreadJS 的显示能力

有些表格单元格不只是一个数字或一句纯文本。报表里可能要显示上标公式，说明单元格里可能要有删除线、标题层级和彩色强调，业务模板里也可能希望把一小段富文本放进格子里。这个 demo 展示了 SpreadJS 的一条扩展路径：创建自定义单元格类型，把 HTML 内容转换成图像，再绘制到单元格画布上。

为什么这个细节重要

普通用户看到的是"单元格里能不能读懂复杂内容"。产品经理关心的是模板表达力：同一个表格里，既要有结构化数据，也要有解释、备注、公式说明和格式强调。开发者关心的则是实现边界：SpreadJS 的工作表主要通过 Canvas 绘制，不能简单理解为把真实 DOM 直接塞进单元格。

这个 demo 的重点正在这里。它不是创建一个可点击、可选择文本的 HTML 区域，而是借助自定义 CellTypes.Text 的 paint 方法，把 HTML 渲染成图片后画进单元格。这种方式适合展示，不适合承载复杂交互。只要边界说清楚，它就能成为很多报表展示场景的实用方案。

SpreadJS 的实现思路

代码先声明 HTMLCellType，让它继承 GC.Spread.Sheets.CellTypes.Text。随后重写 paint(ctx, value, x, y, w, h, style, context)。paint 会拿到当前单元格位置、大小、样式和上下文，于是可以把单元格的 value 当作 HTML 字符串处理。

核心步骤是：用 SVG 字符串包住 foreignObject，把 HTML 内容放进 div；再用 Blob 生成 SVG 资源，用 Image 加载；图片加载完成后调用 context.sheet.repaint(new GC.Spread.Sheets.Rect(...)) 触发重绘。cell.tag() 被用来临时保存图片对象，避免同一次绘制流程里重复生成。

JavaScript 复制代码

function HTMLCellType() {}
HTMLCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();

HTMLCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
  const cell = context.sheet.getCell(context.row, context.col);
  const svgPattern =
    '<svg xmlns="http://www.w3.org/2000/svg" width="{0}" height="{1}">' +
    '<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="font:{2}">{3}</div></foreignObject></svg>';

  const data = svgPattern.replace("{0}", w).replace("{1}", h).replace("{2}", style.font).replace("{3}", value);
  const img = new Image();
  img.src = URL.createObjectURL(new Blob([data], { type: "image/svg+xml;charset=utf-8" }));
  cell.tag(img);
  img.onload = () => context.sheet.repaint(new GC.Spread.Sheets.Rect(x, y, w, h));
};

可以扩展到哪些场景

这个思路适合报告注释、数学或化学公式说明、模板中的富文本提示、带格式的审批意见、培训表格里的示例内容。它也可以和单元格尺寸控制配合，比如给目标列设置更宽的列宽、给目标行设置更高的行高，再开启 wordWrap(true)。

但要注意安全和交互边界。如果 HTML 内容来自用户输入，需要考虑过滤和可信来源；如果内容需要点击链接、选中文本、编辑内部元素，静态图片渲染就不够了，可能要改用浮层、编辑器或更明确的自定义交互。

给开发者的关键词

SpreadJS、JavaScript 电子表格控件、HTML元素单元格、GC.Spread.Sheets.CellTypes.Text、custom cell type、paint、SVG foreignObject、Blob、Image、cell.tag、sheet.repaint、Rect、cellType(new HTMLCellType())。

小结

这个 demo 说明 SpreadJS 的单元格不是只能按默认文本方式显示。通过自定义 CellType，开发者可以把单元格变成更贴近业务内容的展示容器；同时也要记住，它渲染的是画布图像，不是真正嵌入一个可交互的 HTML 子树。