Javascript 使用rowspan和colspan（gridstack）从网格生成HTML表

我有一个gui网格生成器，它就像一个仪表板。为此，我使用gridstack javascript库。 所以我在数据库中存储了gridstack想要的坐标和值。 格式为每个值的x、y坐标和宽度/高度数据。 所有参数都不是像素，而是表示单元 例如，数据集：

{x: 1, y: 2, height: 2, width: 3}

将生成一个从网格第2行和第1列开始的矩形，高度为2行，宽度为3列

我认为我不需要提供示例数据，因为它们每次都可能不同（用户x以A的方式创建仪表板，用户y以B的方式创建仪表板）。重要的是细胞不能重叠。 因此，当我们有一个x:0，y:1，宽度：4，高度：1的数据条目时，不可能有另一个数据条目在x:2，y:1（这里宽度和高度不重要）

这是我的数据结构

我可以用div和绝对位置正常显示，这不是问题，问题是我需要将此页面打印为pdf格式。 对于这样的任务，我使用wkhtml2pdf。它的作用很简单。我提供了一个指向这个程序的url，它用我认为是webkit引擎打开它，获取所有数据并打印该页面，就像在浏览器中使用“打印此网页”一样。 然而，我认为这个工具不能正确地处理绝对定位

我用一个静态html表测试了打印的需要，效果非常好

因此，我想做的是，根据我的数据结构生成一个HTML表，其中包含我需要的所有行和列，以便在访问我们的网站时，在打印的pdf中生成准确的视觉输出

回答“为什么不在浏览器中单击“打印”是不可接受的，因为我需要一个可下载的pdf文件，该文件与普通页面的html和css非常不同，我已经尝试首先使用浏览器可以使用的“打印布局”，但这是不可能的，由于每个浏览器处理它的方式都有点不同，而且它的工作方式也不符合预期

在javascript中生成一点html表格不是问题，我真正的问题是如何计算需要创建哪些td和tr，以生成一个看起来应该是什么样的有效表格

要提供快速测试数据，请执行以下操作：

[
{"title":"image1","y":0,"x":0,"width":3,"height":7,"configuration":{"title":"22344"}},
{"title":"Headline","y":0,"x":3,"width":2,"height":1,"configuration":{"text":"Headline"},
{"title":"image2","y":1,"x":3,"width":2,"height":6,"configuration":{"title":"Fdsfsd"}},
{"title":"text1","y":0,"x":5,"width":2,"height":6,"configuration":{"text":"bzend-framework-php/Zend/View.php:108"},
{"title":"text2","y":7,"x":3,"width":2,"height":4,"configuration":{"text":"Lorem ipsum dolor sit amet"}
]

谁能帮我做这个该死的桌子，我真的没有胶水来完成这个任务

有效的语言是带有jquery库的php和javascript

谢谢,， prdatur

我想出来了。

---

绝对定位正在工作，但我需要在宽度内设置像素而不是%-值，并定义最大宽度，以便wkhtml2pdf更喜欢它：）

请分享您创建表格html的解决方案。