如何使用jsPDF和jsPDF-AutoTable实现PDF中的嵌套表格？

要实现类似示例图的嵌套表格效果，核心是利用jsPDF-AutoTable的didDrawCell回调函数，在主表格的指定单元格内绘制子表格。以下是具体实现步骤和代码示例：

1. 引入依赖 #

先在页面中引入jsPDF和jsPDF-AutoTable的脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>

2. 编写核心代码 #

// 初始化jsPDF实例
const doc = new jspdf.jsPDF('p', 'mm', 'a4');

// 主表格数据：其中"details"字段包含子表格的数据
const mainTableData = [
  { id: 1, name: '订单A', date: '2024-05-01', details: [
    { item: '商品1', qty: 2, price: 100 },
    { item: '商品2', qty: 1, price: 200 }
  ]},
  { id: 2, name: '订单B', date: '2024-05-02', details: [
    { item: '商品3', qty: 3, price: 50 }
  ]}
];

// 主表格列配置
const mainColumns = [
  { title: 'ID', dataKey: 'id' },
  { title: '订单名称', dataKey: 'name' },
  { title: '日期', dataKey: 'date' },
  { title: '明细', dataKey: 'details' }
];

// 绘制主表格
doc.autoTable({
  columns: mainColumns,
  body: mainTableData,
  // 自定义单元格绘制完成后的回调
  didDrawCell: function(data) {
    // 判断当前单元格是否是"明细"列，且存在子表格数据
    if (data.column.dataKey === 'details' && data.cell.raw.length > 0) {
      const subTableData = data.cell.raw;
      // 获取当前单元格的坐标和尺寸
      const { x, y, width, height } = data.cell;
      
      // 子表格列配置
      const subColumns = [
        { title: '商品', dataKey: 'item' },
        { title: '数量', dataKey: 'qty' },
        { title: '单价', dataKey: 'price' }
      ];

      // 在当前单元格内绘制子表格
      doc.autoTable({
        columns: subColumns,
        body: subTableData,
        startY: y + 2, // 子表格距离主单元格顶部的间距
        margin: { left: x + 2, right: doc.internal.pageSize.width - (x + width) }, // 子表格左右边距贴合主单元格
        tableWidth: width - 4, // 子表格宽度（减去左右间距）
        theme: 'plain', // 使用简洁主题避免样式冲突
        headStyles: { fillColor: '#f0f0f0', fontSize: 9 },
        bodyStyles: { fontSize: 8 }
      });
    }
  },
  // 调整主表格"明细"列的行高，预留子表格空间
  rowStyles: function(row) {
    if (row.raw.details.length > 0) {
      // 根据子表格行数动态调整行高（每行约8mm）
      return { minCellHeight: 8 * (row.raw.details.length + 1) };
    }
    return {};
  }
});

// 保存PDF
doc.save('嵌套表格示例.pdf');

关键说明 #

• 坐标控制：通过didDrawCell回调获取主单元格的x、y坐标和尺寸，以此定位子表格的绘制位置，确保子表格完全嵌套在主单元格内。
• 行高调整：利用rowStyles根据子表格的行数动态调整主表格行高，避免子表格超出单元格范围。
• 样式适配：子表格使用theme: 'plain'并调整字体大小，让整体视觉更协调，和主表格风格统一。

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