如何在pdfmake中合并表格的第2与3行、第4与5行,并优化内容结构
如何在pdfmake中合并表格的第2与3行、第4与5行,并优化内容结构
嘿,我懂你想要的效果——就是把每一组的主内容行和下面的备注行整合到一起,视觉上变成一个没有分隔的逻辑行对吧?在pdfmake里不用硬搞行合并,咱们可以通过调整表格单元格的内容结构来实现,同时还能让整体排版更清爽。
我给你改了一下代码,直接把备注内容嵌入到主内容行的单元格里,用多行文本的方式呈现,这样就完全看不到两行的分隔了:
var dd = { content: [ { "table": { "headerRows": 1, "dontBreakRows": true, "widths": [50, 100, 50], "body": [ [ { "text": "Header 1", "style": "tableHeader" }, { "text": "Header 2", "style": "tableHeader" }, { "text": "Header 3", "style": "tableHeader" } ], [ { "text": "ABC1", "margin": [0, 10] }, { "text": [ "Example Description1", { "text": "\nNotes: Example text", "italic": true, "margin": [0, 5] } ], "margin": [0, 10] }, { "text": "Example Description1a", "margin": [0, 10] } ], [ { "text": "ABC2", "margin": [0, 10] }, { "text": [ "Example Description2", { "text": "\nNotes: Example text", "italic": true, "margin": [0, 5] } ], "margin": [0, 10] }, { "text": "Example Description2a", "margin": [0, 10] } ] // 如果你需要总计行,可以在这里加上 // [ // { "text": "Totals", "colSpan": 2, "style": "tableHeader" }, // { "text": "100", "style": "tableHeader" } // ] ] } } ] };
优化说明:
- 消除行分隔:把原来单独的备注行内容,直接放到主内容行的第二个单元格里,用
\n换行,还能给备注加个斜体样式,和主内容区分开,视觉上就是一个连贯的单元格。 - 简化结构:移除了多余的单独备注行,表格body的结构更清晰,每组数据只占一行,逻辑更顺。
- 样式优化:给备注加了小margin,让排版更宽松不拥挤,斜体样式也能让备注内容不抢主内容的风头。
- 保留核心设置:
headerRows和dontBreakRows的设置都保留了,确保表头固定,整行不会被分页打断。
如果之后要加总计行,直接在body数组最后加一行就行,和现在的结构完美兼容~
备注:内容来源于stack exchange,提问作者iamrooovic
相关产品推荐
相关产品推荐

