html5如何绘制表格,javascript – 在HTML5 Canvas中创建表格

我有一个项目,我需要将html表元素保存为图像.看来最好的方法是将表中的数据转换为画布,然后调用toDataURL来获取图像.在搜索了很多提到here的表后,看起来所有这些表都只是在常规的html表中放置一个包装器,使它看起来更漂亮.

>在canvas元素中以表格格式绘制数据是否有任何简单的方法或库(这不是花哨的)？

>我还缺少另一种将表元素的内容保存到图像的方法吗？

由于这是一个Rails项目,我更喜欢JS库使用JQuery.

编辑

我忘了提到表中的一些条目是链接.显然这在常规的html表中运行良好,但它也需要在canvas版本中工作.

编辑2

显然我在第一次编辑时并不清楚.显示给用户的版本(无论是表格还是画布)需要有链接.显然,最终的图像不会.

解决方法:

$(function() {

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var data = "" +

"" + $("#mytable").html() +

"" +

"";

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;

});

Hello

There

这非常有效,但是可以看到可能无法正常工作的CSS的一些奇怪的小提琴.至少在Chrome中,对我来说,桌边框的显示方式并不一样.

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

标签：html,javascript,jquery,html-table,canvas

来源： https://codeday.me/bug/20190725/1535665.html