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));
    }
};