pdfmake 在处理多个表格时会复用表头数组对象，导致右侧表格的 headerrows 无法正确渲染文本；需为每个表格单独定义独立的表头数组，避免引用同一内存地址。
pdfmake 在处理多个表格时会复用表头数组对象，导致右侧表格的 headerrows 无法正确渲染文本；需为每个表格单独定义独立的表头数组，避免引用同一内存地址。
在使用 PDFMake 构建并排双表格（如左右分栏）时，一个常见却容易被忽视的问题是：仅左侧表格显示完整表头，右侧表格虽有表头行结构，但文字内容为空。根本原因在于 PDFMake（底层依赖 PDFKit）在解析 body 数组时，会对对象进行浅层复用或状态标记——当同一个表头数组（例如 tableHeaders）被两次推入不同表格的 body 中时，PDFMake 在第二次处理时可能跳过文本渲染逻辑，导致视觉上“表头行存在但无文字”。
✅ 正确做法：为每个表格创建独立的表头数组
不要共享同一个数组引用：
// ❌ 错误：复用同一数组 → 右侧表头失效
const tableHeaders = [{ text: 'Last Name', style: 'tableHeader' }, ...];
const leftTableBody = [tableHeaders, ['Doe', 'John', '5', 'A']];
const rightTableBody = [tableHeaders, ['Smith', 'Jane', '6', 'B']]; // ← 问题根源！
✅ 应分别声明两个语义相同、但内存独立的表头数组：
const tableHeaderLeft = [
{ text: 'Last Name', style: 'tableHeader' },
{ text: 'First Name', style: 'tableHeader' },
{ text: 'Grade', style: 'tableHeader' },
{ text: 'Class', style: 'tableHeader' }
];
const tableHeaderRight = [
{ text: 'Last Name', style: 'tableHeader' },
{ text: 'First Name', style: 'tableHeader' },
{ text: 'Grade', style: 'tableHeader' },
{ text: 'Class', style: 'tableHeader' }
];
const leftTableBody = [tableHeaderLeft, ['Doe', 'John', '5', 'A']];
const rightTableBody = [tableHeaderRight, ['Smith', 'Jane', '6', 'B']];
? 补充说明与最佳实践
-
深层原因：PDFMake 并非纯函数式库，其内部对
body中的对象（尤其是含text/style的单元格）可能存在状态标记（如rendered标志），复用同一对象实例会干扰第二次渲染流程。 -
验证方式：可使用
JSON.parse(JSON.stringify(tableHeaders))快速克隆（适用于简单结构），但显式声明更清晰、可控且无性能隐患。 -
样式复用无影响：
style: 'tableHeader'是字符串引用，可安全共用；问题仅出在表头数据对象的引用一致性上。 - 扩展建议：若表头结构动态生成，封装为工厂函数提升可维护性：
const createTableHeader = () => ([
{ text: 'Last Name', style: 'tableHeader' },
{ text: 'First Name', style: 'tableHeader' },
{ text: 'Grade', style: 'tableHeader' },
{ text: 'Class', style: 'tableHeader' }
]);
const leftTableBody = [createTableHeader(), ['Doe', 'John', '5', 'A']];
const rightTableBody = [createTableHeader(), ['Smith', 'Jane', '6', 'B']];
遵循此原则后，双表格将均能正确显示带样式的表头行，确保输出 PDF 的专业性与数据可读性。
