3

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

  1. 有没有简单的方法或库（这不是花哨的）在画布元素中以表格格式绘制数据？
  2. 我是否缺少另一种将表格元素的内容保存到图像的方法？

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

编辑

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

编辑 2

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

4

1 回答 1

9

这是一个示例（修改自：https ://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas ）

http://jsfiddle.net/StEcW/1/

$(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>

这工作得很好，但是请参阅小提琴以了解可能无法正常工作的 CSS 的一些奇怪之处。至少，在 Chrome 中，对我来说，表格边框的显示方式不同。

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

于 2013-02-11T17:25:17.400 回答