SpreadJS自定义单元格系列-HTML单元格

单元格中单一颜色的问题略显枯燥，想要实现单元格中文字丰富的样式，只需要自定义HTML单元格。

由于我们只是对单元格展示做调整所以我们直接继承GcSpread.Sheets.TextCellType，然后重写paint方法即可。

function HTMLCellType() {}
HTMLCellType.prototype = new GcSpread.Sheets.TextCellType;
HTMLCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
    var DOMURL = window.URL || window.webkitURL || window;
    var cell = context.sheet.getCell(context.row, context.col);
    var img = cell.tag();
    if (img) {
      try{
        ctx.save();
        ctx.rect(x, y, w, h);
        ctx.clip();
        ctx.drawImage(img, x + 2, y + 2)
        ctx.restore();
        cell.tag(null);
        return;
      }
      catch(err){
        GcSpread.Sheets.CustomCellType.prototype.paint.apply(this, [ctx, "#HTMLError", x, y, w, h, style, context])
        cell.tag(null);
        return;
      }
    }
    var 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>';
    var data = svgPattern.replace("{0}", w).replace("{1}", h).replace("{2}", style.font).replace("{3}", value);
    var doc = document.implementation.createHTMLDocument("");
    doc.write(data);
    data = (new XMLSerializer()).serializeToString(doc.body.children[0]);
    img = new Image();
    img.src = 'data:image/svg+xml;base64,'+window.btoa(data);
    cell.tag(img);
    img.onload = function () {
        context.sheet.repaint(new GcSpread.Sheets.Rect(x, y, w, h));
    }
};

示例中我们使用svg将html元素保存为Image对象，然后保存在cell的tag中，spread重绘时展示出来。

RunJS在线演示地址http://runjs.cn/detail/imqwbthf 请在Edge或Chrome中查看

更多资源

SpreadJS中文学习指南：http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线英文产品文档：http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html

如果您对SpreadJS产品感兴趣，可以到官方网站下载试用：/developer/spreadjs

如果你有疑问，可以到GCDN论坛获得技术支持：http://gcdn.grapecity.com.cn