如何在pdfmake中动态添加内容？动态行生成故障排查

核心问题排查 #

• 你的createRow方法大概率没有明确返回行配置对象——单独调用时可能隐式返回结果，但在map循环中如果缺少return语句，会直接返回undefined，导致最终生成的行数组为空。
• 另一个常见坑是误用无返回值的循环（比如forEach）替代map，或者没有正确将循环结果赋值到表格的body中。

修复步骤 #

1. 确保createRow有明确返回值 #

检查你的行生成函数，必须返回pdfmake认可的行结构对象，示例：

function createRow(item) {
  // 必须用return明确返回行配置
  return [
    { text: item.id, alignment: 'left' },
    { text: item.name, alignment: 'left' },
    { text: item.value, alignment: 'right' }
  ];
}

2. 用map适配未知长度数据 #

直接通过map遍历数据数组，将每个元素转换为行，再用扩展运算符...把结果展开到表格的body中——不管数组长度多少都能自动适配：

// 未知长度的动态数据
const dynamicData = [
  { id: 1, name: '产品A', value: '¥100' },
  { id: 2, name: '产品B', value: '¥200' },
  // 更多数据...
];

const docDefinition = {
  content: [
    {
      table: {
        headerRows: 1,
        widths: ['*', '*', '*'],
        body: [
          // 固定表头
          ['ID', '名称', '金额'],
          // 动态生成行：直接展开map结果
          ...dynamicData.map(item => createRow(item))
        ]
      }
    }
  ]
};

3. 替代方案：手动构建行数组 #

如果map用法还是有问题，可以用forEach手动收集行，兼容性更稳妥：

// 先初始化表头
const tableBody = [['ID', '名称', '金额']];
// 遍历数据添加行
dynamicData.forEach(item => {
  tableBody.push(createRow(item));
});

const docDefinition = {
  content: [
    {
      table: {
        headerRows: 1,
        widths: ['*', '*', '*'],
        body: tableBody
      }
    }
  ]
};

完整可运行示例 #

// 模拟未知长度的动态数据
const dynamicData = Array.from({ length: 5 }, (_, i) => ({
  id: i + 1,
  name: `产品${String.fromCharCode(65 + i)}`,
  value: `¥${(i + 1) * 100}`
}));

// 标准行生成函数
function createRow(item) {
  return [
    { text: item.id.toString(), alignment: 'center' },
    { text: item.name, alignment: 'left' },
    { text: item.value, alignment: 'right', color: '#2ecc71' }
  ];
}

// 构建PDF配置
const docDefinition = {
  content: [
    { text: '动态生成表格', style: 'header' },
    {
      table: {
        headerRows: 1,
        widths: ['10%', '60%', '30%'],
        body: [
          [{ text: 'ID', bold: true }, { text: '产品名称', bold: true }, { text: '金额', bold: true }],
          // 直接传递函数引用更简洁
          ...dynamicData.map(createRow)
        ]
      },
      layout: 'lightHorizontalLines'
    }
  ],
  styles: {
    header: { fontSize: 16, bold: true, margin: [0, 0, 0, 10] }
  }
};

// 生成并打开PDF
pdfMake.createPdf(docDefinition).open();

内容的提问来源于stack exchange，提问作者Nati