使用 rowspan 和 colspan (gridstack) 从 Grid 生成 HTML 表

Question

我有一个 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, width: 4, height: 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。

谢谢你， 预知

Answer 1

我想通了。 绝对定位有效，但我需要在宽度内设置像素而不是 %-values 并定义最大宽度，因此 wkhtml2pdf 更喜欢它:)