function HtmlCellType() {}
HtmlCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
// 重写 paint 方法
HtmlCellType.prototype.paint = function (ctx, value, x, y, w, h) {
if (!value || typeof(value) != "string") return;
// const svg = document.createElement("svg");
// svg.xmlns = "http://www.w3.org/2000/svg";
// svg.style.width = w + "px";
// svg.style.heigth = h + "px";
// svg.innerHTML = `<foreignObject width="100%" height="100%">${value}</foreignObject>`;
// const img = new Image();
// img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
// ctx.drawImage(svg, x, y, w, h);
const div = document.createElement("div");
div.style.width = w + 'px';
div.style.height = h + 'px';
div.innerHTML = value;
document.body.appendChild(div);
html2canvas(div).then(canvas => {
ctx.drawImage(canvas, x, y, w, h);
});
};
以上代码为DeepSeek提供，目前能实现简单的div元素渲染在指定单元格中，见下图：
但如果div中存在img元素则会渲染失败，无报错，文本+图片都会无法渲染。
除此方案外，ds还给了第二个方案，也就是上面的注释代码，将HTML片段用foreignObject元素包裹，再套进svg元素中，然后将整个svg转成img元素，调用ctx.drawImage去渲染至单元格。
此方案既无法渲染文本，也无法渲染img，单独抽出来整个svg元素放在新的html文件中却又是能正常显示的。
除了以上两种方法，请问各位大佬还有什么方法能在单元格中渲染HTML片段？
|
-
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
