在HTML5画布内创建表格

我有一个项目，我需要将html表格元素保存为图像。看起来最好的方法是将表中的数据转换成画布，然后调用DataURL来获取图像。在搜索了很多here提到的表格之后，它们看起来像是只是在常规的html表格中放置一个包装，使它看上去更有趣。在HTML5画布内创建表格

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

既然这是一个Rails项目，我宁愿如果JS库使用JQuery。

编辑

我忘了提及表中的一些条目是链接。很显然，这在正常的html表格中运行良好，但它也需要在canvas版本中工作。

编辑2

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

来源

2013-02-11 Jon

乔恩，只是一个问题来澄清：您的服务器（PHP/IIS）生成的数据创建HTML表？如果是这样，你可以考虑使用php或iis服务器插件来将数据表示为pdf。 – markE 2013-02-11 18:09:45

一个有趣的命题，如果画布渲染不起作用，那么我会尝试。我使用的是Rails，所以我实际上是直接用ERB将数据插入到DOM中。 – Jon 2013-02-11 18:31:04

下面是一个例子（改：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-11 17:25:17 aquinas

不幸的是，这在我的情况下不起作用，因为表格中的一些条目需要链接。我试图在小提琴上添加一个href，并且它在画布上没有正确渲染。我已经更新了我的问题来补充这个事实。 – Jon 2013-02-11 17:34:20

咦？你说，“...我需要保存一个HTML表格元素作为图像。”如果您将它保存为图像，您打算如何使用超级链接工作...与图像？ – aquinas 2013-02-11 17:38:57

对不起，我不够具体。表格显示时需要链接。图像没有。我假设我只是向用户显示画布，但我想我不需要。我可以转换为画布，然后转换为图像并保存，并将原始表格显示给用户。你认为这会起作用吗？ – Jon 2013-02-11 17:43:59

在HTML5画布内创建表格

回答

相关问题