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

Question

我有一个gui网格生成器，其作用类似于仪表板。 为此，我使用gridstack javascript库。 因此，我已将坐标和值存储在数据库中，Gridstack希望如何。 该格式适用于每个值ax，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"}
]

谁能帮助我创建该死的表，但我确实没有胶水来完成此任务。

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

谢谢prdatur

Answer 1

我想到了。 绝对定位是可行的，但我需要设置像素而不是宽度内的％值并定义最大宽度，因此wkhtml2pdf喜欢它:)