[英]How to Create html table like structure using fabric js?
Use Html Table inside svg as shown below and convert it into image and use it as fabric object如下所示在 svg 中使用 Html Table 并将其转换为图像并将其用作结构对象
var svgData = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:30px">' +
'<table border="1"><thead><tr><td>Title</td></tr></thead><tbody><tr><td>Id</td><td>char</td></tr></tbody></table>' +
'</div>' +
'</foreignObject>' +
'</svg>';
// creating image from svg
const dataUri = `data:image/svg+xml;base64,${window.btoa(svgData)}`;
const img = new Image();
img.onload = () => {
var imgInstance = new fabric.Image(img, {
left: 0,
top: 0,
width: 300,
height: 200,
});
canvas.add(imgInstance);
canvas.renderAll();
};
img.src = dataUri;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.