javascript 在 HTML5 Canvas 中创建表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14817122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating tables within an HTML5 Canvas
提问by Jon
I have a project where I need to save an html table element as an image. It would appear that the best way to do this is to convert the data from the table into a canvas and then call toDataURL to get an image. After searching through a lot of the tables mentioned hereit looks like all of them just put a wrapper around a regular html table to make it look fancier.
我有一个项目，需要将 html 表格元素保存为图像。似乎最好的方法是将表中的数据转换为画布，然后调用 toDataURL 来获取图像。在搜索了很多这里提到的表格之后，看起来他们都只是在一个普通的 html 表格周围放了一个包装器，使它看起来更漂亮。
- Are there any simple way or library (this isn't fancy) to draw data in a tabular format within a canvas element?
- Is there another way that I am missing to save the contents of a table element to an image?
- 是否有任何简单的方法或库（这并不奇怪）在画布元素中以表格格式绘制数据？
- 是否有另一种方法可以将表格元素的内容保存到图像中？
Since this is a Rails project I would prefer if the JS library used JQuery.
由于这是一个 Rails 项目，我更喜欢 JS 库使用 JQuery。
EDIT
编辑
I forgot to mention that some of the entries in the table are links. Obviously this works well in a regular html table, but it also needs to work in the canvas version.
我忘了提到表中的一些条目是链接。显然，这在常规 html 表中效果很好，但它也需要在 canvas 版本中工作。
EDIT 2
编辑 2
Apparently I wasn't clear in the first edit. The version that's displayed to the user (be it table or canvas) needs to have links. The final image, obviously, will not.
显然我在第一次编辑时不清楚。显示给用户的版本（无论是表格还是画布）需要有链接。显然，最终图像不会。
回答by aquinas
Here's an example (modified from: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas)
这是一个示例（修改自：https: //developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas）
$(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>
This works pretty well, but see the fiddle for some weirdness around possible CSS that might not work quite right. At least, in Chrome, for me, the table border didn't display the same way.
这工作得很好，但请参阅小提琴，了解可能无法正常工作的 CSS 周围的一些奇怪之处。至少，在 Chrome 中，对我来说，表格边框的显示方式不同。
Edit: of course, it doesn't actually make much sense to go through canvas. The canvas is just drawing the image we've already created. All you need to do is show the image in the DOM.
编辑：当然，通过画布实际上没有多大意义。画布只是绘制我们已经创建的图像。您需要做的就是在 DOM 中显示图像。
