要素にを描画HTML
table
する方法(プラグイン、実用的なソリューションなど)はありますか?<canvas>
リッチフォーマットのhtmlテーブル(を使用CSS
)があり、を使用して画像(PNG、SVG、またはGIF)として保存したいと思いjQuery
ます。...または、もっと簡単な方法があれば、私はそれを聞いています。
要素にを描画HTML
table
する方法(プラグイン、実用的なソリューションなど)はありますか?<canvas>
リッチフォーマットのhtmlテーブル(を使用CSS
)があり、を使用して画像(PNG、SVG、またはGIF)として保存したいと思いjQuery
ます。...または、もっと簡単な方法があれば、私はそれを聞いています。
確かに、それは可能です。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>