Jquery 我可以在画布元素中绘制表格吗？

是否有任何方法（插件、工作解决方案等）将

HTML

表格

绘制到

元素中

我有一个格式丰富的html表格（使用

CSS

），我想使用

jQuery

将其保存为图像（PNG、SVG或GIF）。。。或者如果有最简单的方法，我正在听。

当然，这是可能的。可以将DOM对象绘制到画布中。以下是您需要的代码：

<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
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%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                  "<table border='1'><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>" +
               "</div>" +
             "</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;
</script>​

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var data=“”+
"" +
"" +
第1行，第1行单元格，第2行单元格，第1行单元格，第2行单元格+
"" +
"" +
"";
var DOMURL=self.URL | | self.webkitURL | | self；
var img=新图像（）；
var svg=newblob（[data]，{type:“image/svg+xml；charset=utf-8”}）；
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
};
img.src=url；
​

---

我不认为你可以使用JS访问呈现HTML元素的像素数据（不使用任何浏览器插件），你应该检查一下，在画布上创建了一个屏幕截图后，你可以通过调用

canvas.toDataURL（）获得图片CSS

文件用于生成的

SVG

图像吗？不确定是否可以使用外部CSS样式。请查看我在此答案中提供的更多信息的链接。我知道这是一个旧答案，但应该注意，这将在除Edge和Firefox之外的所有浏览器中污染画布，从而使所有编程导出不可用。您提供的链接不再可用@自动驾驶仪-备用