Javascript 在HTML5画布中创建表

我有一个项目，需要将html表格元素保存为图像。这样做的最佳方法似乎是将表中的数据转换为画布，然后调用toDataURL以获取图像。在搜索了前面提到的许多表之后，看起来所有的表都只是在一个普通的html表周围放了一个包装器，使它看起来更漂亮

是否有任何简单的方法或库（这并不奇怪）在画布元素中以表格格式绘制数据

是否有另一种我缺少的将表元素的内容保存到图像的方法

由于这是一个Rails项目，我更希望JS库使用JQuery

编辑

我忘了提到表中的一些条目是链接。显然，这在常规html表中工作得很好，但它也需要在画布版本中工作

编辑2

显然，我在第一次编辑时不清楚。显示给用户的版本（无论是表还是画布）需要有链接。显然，最终的图像不会出现。

这里有一个示例（修改自：）

$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var data=“”+
“”+$（“#mytable”）.html（）+
"" +
"";
var DOMURL=self.URL | | self.webkitURL | | self；
var img=新图像（）；
var svg=新的Blob（[data]{
类型：“image/svg+xml；charset=utf-8”
});
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
};
img.src=url；
});
你好
那里

这工作得很好，但看到小提琴周围的一些奇怪的CSS可能不太正确的工作。至少，在Chrome中，对我来说，表格边框的显示方式不同

---

编辑：当然，浏览画布实际上没有多大意义。画布正在绘制我们已经创建的图像。您所需要做的就是在DOM中显示图像

不幸的是，这在我的情况下不起作用，因为表中的一些条目需要是链接。我尝试在小提琴上添加a href，但它在画布上的渲染不正确。我更新了我的问题来添加这个事实，嗯？你说，“…我需要将html表元素保存为图像。”如果你将其保存为图像，你打算如何让超链接与图像一起工作？抱歉，我说得不够具体。显示的表格需要有链接。图像没有显示。我假设我只向用户显示画布，但我想我不必这样做。我可以转换为画布，然后转换为图像并保存，然后向用户显示原始表。你觉得这样行吗？我想你会这么做的。一个跨浏览器的问题——我相信InternetExplorer不支持svg的.Jon，只是一个需要澄清的问题：您的服务器（php/iis）是否正在生成创建html表的数据？如果是这样，您可能会考虑使用PHP或IIS服务器插件来将数据表示为PDF。一个有趣的命题，如果画布绘制不起作用，那么我会尝试它。我使用的是Rails，所以我实际上使用ERB将数据直接插入DOM。

$(function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
        "<foreignObject width='100%' height='100%'>" + $("#mytable").html() +
        "</foreignObject>" +
        "</svg>";
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([data], {
        type: "image/svg+xml;charset=utf-8"
    });
    var url = DOMURL.createObjectURL(svg);
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
    };
    img.src = url;
});

<div id="mytable">
    <div xmlns="http://www.w3.org/1999/xhtml" style='font-size:12px'>      
        <table border=1 id="amytable">
            <tr>
                <td>Hello</td>
                <td>There</td>
            </tr>        
        </table>
    </div>
</div>