jsPDF autotable单元格合并与格式化问题求助

针对你用jsPDF AutoTable处理7个数据适配4列时遇到的三个问题，下面是具体的解决方法和修正后的代码：

问题1：didParseCell钩子中换行无效 #

默认AutoTable不会自动解析单元格内容里的换行符，需手动将文本转为数组格式来触发换行，同时设置行间距适配：

• 在didParseCell中，把带\n的字符串拆分为数组赋值给cell.text
• 同步设置cell.styles.lineHeight调整行间距

问题2：合并单元格后无法单独设置分类/百分比的样式 #

合并单元格后原单元格样式会被覆盖，可通过手动绘制文本块实现精准样式控制：

• 在drawCell钩子中，分别绘制分类（加粗）和百分比（常规样式）的文本
• 用stopDraw阻止默认渲染，避免内容重复

问题3：最后一个表头未右对齐 #

直接在didParseCell中判断表头列位置，强制设置对齐方式：

• 识别当前单元格为表头且是最后一列时，修改cell.styles.alignment为right

修正后的完整代码示例 #

import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

const doc = new jsPDF();

// 模拟API返回的7个数据（按你的业务结构调整）
const apiData = [
  { type: "分类1", value: 12, rate: "17%" },
  { type: "分类2", value: 23, rate: "33%" },
  { type: "分类3", value: 18, rate: "26%" },
  { type: "分类4", value: 16, rate: "24%" },
  // 剩余3个数据按实际补充
];

// 构造适配4列的表格数据（合并单元格逻辑，按7个值的排版需求调整）
const tableBody = [];
apiData.forEach((item, idx) => {
  // 示例逻辑：前6个数据分3行，每行2组，最后1个数据单独占一行对应总计列
  if (idx < 6) {
    const rowIdx = Math.floor(idx / 2);
    if (!tableBody[rowIdx]) tableBody[rowIdx] = { col1: "", col2: "", col3: "", col4: "" };
    if (idx % 2 === 0) {
      tableBody[rowIdx].col1 = `${item.type}\n${item.rate}`;
      tableBody[rowIdx].col2 = item.value;
    } else {
      tableBody[rowIdx].col3 = `${item.type}\n${item.rate}`;
      tableBody[rowIdx].col4 = item.value;
    }
  } else {
    tableBody.push({
      col1: "总计",
      col2: apiData.reduce((sum, i) => sum + i.value, 0),
      col3: "",
      col4: "100%"
    });
  }
});

autoTable(doc, {
  head: [["分类", "数值", "分类", "数值/总计"]],
  body: tableBody,
  columnStyles: {
    0: { cellWidth: 75 },
    1: { cellWidth: 65 },
    2: { cellWidth: 75 },
    3: { cellWidth: 65 }
  },
  headStyles: {
    fillColor: "#f5f5f5",
    fontStyle: "bold"
  },
  didParseCell: (data) => {
    const cell = data.cell;
    // 处理换行
    if (cell.text && typeof cell.text === 'string' && cell.text.includes('\n')) {
      cell.text = cell.text.split('\n');
      cell.styles.lineHeight = 1.6;
    }
    // 最后一个表头右对齐
    if (data.section === 'head' && data.column.index === 3) {
      cell.styles.alignment = 'right';
    }
  },
  drawCell: (data) => {
    const cell = data.cell;
    // 单独设置分类和百分比的样式
    if ([0, 2].includes(data.column.index) && cell.text && Array.isArray(cell.text)) {
      // 绘制加粗的分类文本
      doc.setFont("helvetica", "bold");
      doc.text(cell.text[0], cell.x + 4, cell.y + 7);
      // 绘制常规的百分比文本
      doc.setFont("helvetica", "normal");
      doc.text(cell.text[1], cell.x + 4, cell.y + 7 + 11);
      // 阻止默认渲染
      data.stopDraw = true;
    }
  }
});

doc.save("formatted-table.pdf");

关键修改说明 #

1. 换行实现：通过拆分文本为数组+设置行高，让单元格内容自动换行
2. 独立样式控制：在drawCell中分别绘制不同样式的文本块，实现分类加粗、百分比常规的效果
3. 表头对齐：精准识别最后一列表头，强制设置右对齐

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