SpreadJS HTML CellType

<!DOCTYPE html>
<html>

  <head>
      <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="SpreadJS@*" data-semver="3.20143.15" rel="stylesheet" href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.3.20143.15.css" />
    <script data-require="SpreadJS@*" data-semver="3.20143.15" src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.3.20143.15.min.js"></script>

    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Hello SpreadJS!</h1>
    <div id="ss" style="width: 700px; height: 500px; border: 1px solid gray"></div>
  </body>

</html>

function HTMLCellType() {}
HTMLCellType.prototype = new $.wijmo.wijspread.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) {
        ctx.save();
        ctx.rect(x, y, w, h);
        ctx.clip();
        ctx.drawImage(img, x + 2, y + 2)
        ctx.restore();
        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);
    // Get well-formed markup
    data = (new XMLSerializer()).serializeToString(doc.body.children[0]);

    img = new Image();
    //var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    //var url = DOMURL.createObjectURL(svg);
    //img.src = url;
    img.src = 'data:image/svg+xml;base64,'+window.btoa(data);
    cell.tag(img);
    img.onload = function () {
        context.sheet.repaint(new $.wijmo.wijspread.Rect(x, y, w, h));
    }
};

// Initialize SpreadJS
$(document).ready(function() {
  $("#ss").wijspread();
  var spread = $("#ss").wijspread("spread");
  var sheet = spread.getActiveSheet();
  sheet.getColumn(1).width(300);
  sheet.getRow(1).height(100);
  sheet.getCell(1, 1).cellType(new HTMLCellType()).value('<h1>Hello SpreadJS!</h1><h2><em style="color:red">I</em> like ' +
    '<span style="color:white; text-shadow:0 0 2px blue;">' +
    'Javascript</span></h2>');
});

/* Styles go here */

This is a sample shows how to show html content in cell, it uses svg foreignObject to convert html string to an image. 
But this sample doesn't work in IE because IE don't support foreignObject.