Use Html Table inside svg as shown below and convert it into image and use it as fabric object
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.