pdfmake 中若将同一表头数组变量复用于多个表格，会导致第二个表格表头文字丢失——这是因 pdfmake 内部会修改并消耗原始对象引用；正确做法是为每个表格提供独立的表头数组副本。
pdfmake 中若将同一表头数组变量复用于多个表格，会导致第二个表格表头文字丢失——这是因 pdfmake 内部会修改并消耗原始对象引用；正确做法是为每个表格提供独立的表头数组副本。
在使用 PDFMake 构建多表格布局（如并排双表）时，一个常见却易被忽视的问题是：第一个表格表头正常渲染，而第二个表格虽显示表头行结构，但单元格内文字为空。该问题并非样式或配置错误，而是源于 PDFMake 的底层行为机制。
根本原因：对象引用被意外复用与修改
PDFMake 在解析表格 body 时，会对 headerRows 指定的行（通常是第 0 行）执行内部处理，包括样式合并、文本提取及单元格对象转换。当两个表格共用同一个 tableHeaders 数组（即同一内存引用）时，PDFMake 在处理第一个表格后可能已修改该数组内部结构（例如将 {text: 'xxx'} 转换为带 stack 或 text 规范化的节点），导致第二个表格接收到的是已被“消耗”或格式不兼容的对象，最终跳过文本渲染。
正确解决方式：为每个表格提供独立表头副本
避免共享引用，应分别为左右表格定义独立的表头数组。以下是修正后的关键代码段：
// ✅ 正确：两个完全独立的表头数组（不同引用）
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']];
const columns = [
{
width: '50%',
table: {
headerRows: 1,
widths: ['*', '*', 40, 40],
body: leftTableBody
}
},
{
width: '50%',
table: {
headerRows: 1,
widths: ['*', '*', 40, 40],
body: rightTableBody
}
}
];
进阶建议与注意事项
-
自动克隆方案（适用于动态表头）：若表头需动态生成，可使用
JSON.parse(JSON.stringify(originalHeaders))浅克隆（仅限纯对象结构），或借助 Lodash 的cloneDeep()确保深度隔离。 -
避免
Object.assign()或展开语法误用：[...tableHeaders]仅浅拷贝数组，若表头对象内含嵌套属性仍可能共享引用；稳妥起见优先显式声明或深度克隆。 -
验证技巧：在调用
pdfMake.createPdf()前，通过console.log(rightTableBody[0][0])检查第二个表头首单元格是否仍保留text属性，可快速定位是否被污染。
此问题本质是 JavaScript 对象引用与库内部状态管理的交互结果。理解并规避共享引用，是构建稳定 PDFMake 多表格布局的关键实践。
