Question

我有一个gui网格构建器，它就像一个仪表板。为此，我使用gridstack javascript库。所以我已经在我的数据库中存储了gridstack想要它的坐标和值。格式适用于每个值a 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（此处宽度和高度无关紧要）< / p>

我的数据结构。

我可以用div和绝对定位来显示它，这不是问题，问题是我需要将这个页面打印为pdf。对于这样的任务我使用wkhtml2pdf。它的作用很简单。我提供了一个这个程序的URL，它打开它，我认为它是webkit引擎，获取所有数据并打印该页面，就像你一样打印这个网页＆＃34;在浏览器中。但是我假设这个工具无法正确处理绝对定位。

我使用静态html表测试了我是否需要它，这非常有用。

所以我想要做的是，基于我的数据结构生成一个HTML-Table，我需要在访问我们网站时在打印的pdf中生成所有的行和colspan。

答案＆＃34;为什么不点击“打印”＆＃39;在浏览器中＃34;是不可接受的，因为我需要一个可下载的pdf文件，它与周围的html和css非常不同，作为普通页面，我已经尝试过首先使用＆＃34;打印布局＆＃34;这可以被浏览器使用，但这是不可能的，因为每个浏览器处理它有点不同，并且它没有按预期工作。

要在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

Answer 1

我明白了。绝对定位是有效的，但我需要在宽度内设置像素而不是％-values并定义最大宽度，所以wkhtml2pdf更喜欢它：）

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

1 个答案: