Angular 9中Pdfmake含跨行(rowspan)与超长数据时边框显示异常

问题根源 #

你的表格边框异常是两个核心原因叠加导致的：

• 跨行单元格（rowSpan=7）的后续行中，手动将前两列边框全设为[false,false,false,false]，破坏了pdfmake对跨行单元格边框的连贯性计算逻辑；
• 存在未自动换行的超长文本，超出页面范围后打乱了表格的整体布局渲染。

具体修复方案 #

1. 精准控制单元格边框，避免全局隐藏

不要直接把跨行单元格对应的后续行边框全设为false，而是只隐藏不需要显示的边框（比如上边框），保留左右边框维持跨行的视觉连贯性。例如将后续行前两列的边框改为[true, false, true, false]（左、上、右、下，仅隐藏上边框）。

2. 给超长文本添加自动换行配置

给包含超长文本的单元格添加wordWrap: 'break-word'和alignment: 'left'（或justify），强制文本换行，避免溢出页面打乱布局。

3. 调整表格列宽，给长文本列预留足够空间

适当调整超长文本所在列的宽度百分比，比如把第10列（"Thời gian thực hiện hợp đồng"）的宽度从9%调至12%，其他列对应缩小，保证总宽度占比为100%。

修改后的docDefinition示例 #

{
  "widths": ["7%", "9%", "9%", "8%", "8%", "8%", "8%", "8%", "8%", "12%", "11%"],
  "body": [
    [
      {"text":"STT","fontSize":11,"style":"tableHeader"},
      {"text":"Tên nhà thầu","fontSize":11,"style":"tableHeader"},
      {"text":"Mã số thuế","fontSize":11,"style":"tableHeader"},
      {"text":"Giá dự thầu (VND)","fontSize":11,"style":"tableHeader"},
      {"text":"Giá dự thầu sau hiệu chỉnh sai lệch thừa (nếu có), giảm giá (nếu có) (VND)","fontSize":11,"style":"tableHeader"},
      {"text":"Điểm kỹ thuật (nếu có)","fontSize":11,"style":"tableHeader"},
      {"text":"Giá đánh giá (nếu có) (VND)","fontSize":11,"style":"tableHeader"},
      {"text":"Giá trúng thầu (VND)","fontSize":11,"style":"tableHeader"},
      {"text":"Thời gian thực hiện gói thầu","fontSize":11,"style":"tableHeader"},
      {"text":"Thời gian thực hiện hợp đồng","fontSize":11,"style":"tableHeader"},
      {"text":"Các nội dung khác (nếu có)","fontSize":11,"style":"tableHeader"}
    ],
    [
      {"text":1,"fontSize":11,"rowSpan":7,"style":""},
      {"text":"Liên danh bảo hiểm Tổ hợp bauxit - nhôm Lâm Đồng","fontSize":11,"rowSpan":7,"style":""},
      {"text":"9876543219","fontSize":11,"style":""},
      {"text":"1.071.031.727","rowSpan":7,"fontSize":11,"style":""},
      {"text":" ","rowSpan":7,"fontSize":11,"style":""},
      {"text":" ","rowSpan":7,"fontSize":11,"style":""},
      {"text":" ","rowSpan":7,"fontSize":11,"style":""},
      {"text":"1.071.031.727","rowSpan":7,"fontSize":11,"style":""},
      {"text":"365 ngày kể từ 0 giờ 00 phút ngày 01/01/2025 đến 24 giờ 00 phút ngày 31/12/2025","rowSpan":7,"fontSize":11,"style":""},
      {"text":"Giá dự thầu sau hiệu chỉnh sai lệch thừa (nếu có), á dự thầu sau hiệu chỉnh thầu sau hiệu chỉnh sai lệch thừa (nếu có), giảm giá (nếu có) (VND)Giá dự thầu sau hiệu chỉnh sai lệch thừa (nếu có), á dự thầu sau lệch thừa (nếu có), giảm giá (nếu có) (VND)","fontSize":11,"rowSpan":7,"style":"","wordWrap":"break-word","alignment":"left"},
      {"text":" ","rowSpan":7,"fontSize":11,"style":""}
    ],
    [
      {"text":" ","border":[true, false, true, false]},
      {"text":" ","border":[true, false, true, false]},
      {"text":"0967722385","fontSize":11,"style":""},
      {"text":" ","border":[false,false,false,false]},
      {"text":" ","border":[false,false,false,false]},
      {"text":" ","border":[false,false,false,false]},
      {"text":" ","border":[false,false,false,false]},
      {"text":" ","border":[false,false,false,false]},
      {"text":" ","border":[false,false,false,false]},
      {"text":" ","border":[false,false,false,false]},
      {"text":" ","border":[false,false,false,false]}
    ],
    [{"text":" ","border":[true, false, true, false]},{"text":" ","border":[true, false, true, false]},{"text":"0967722386","fontSize":11,"style":""},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]}],
    [{"text":" ","border":[true, false, true, false]},{"text":" ","border":[true, false, true, false]},{"text":"0912348085","fontSize":11,"style":""},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]}],
    [{"text":" ","border":[true, false, true, false]},{"text":" ","border":[true, false, true, false]},{"text":"0912348086","fontSize":11,"style":""},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]}],
    [{"text":" ","border":[true, false, true, false]},{"text":" ","border":[true, false, true, false]},{"text":"9876543214","fontSize":11,"style":""},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]}],
    [{"text":" ","border":[true, false, true, false]},{"text":" ","border":[true, false, true, false]},{"text":"9876543215","fontSize":11,"style":""},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]},{"text":" ","border":[false,false,false,false]}]
  ],
  "preserveLeadingSpaces":true
}

额外注意事项 #

• 确保使用pdfmake的最新稳定版，旧版本可能存在跨行表格的渲染bug；
• 若表格需要分页，尽量避免跨行单元格刚好卡在分页位置，可通过调整内容或页面边距优化；
• 不要手动修改跨行单元格的高度，让pdfmake自动根据内容计算，避免边框错位。

内容的提问来源于stack exchange，提问作者Văn Giang