Angular中jsPDF-autotable表格表头首列无法加粗问题

常见原因及修复方案 #

1. 样式优先级冲突 #

如果代码中同时设置了全局列样式和表头单元格样式，可能全局列样式优先级更高，覆盖了第一列的加粗设置。

修复方法：在表头样式中明确指定第一列的字体权重，确保样式应用顺序正确。

示例代码（基于jsPDF-autotable插件）：

const doc = new jsPDF();

// API返回的表格数据示例
const tableData = [
  ["User Id", "Name", "Email"],
  ["1", "John Doe", "john@example.com"],
  ["2", "Jane Smith", "jane@example.com"]
];

doc.autoTable({
  head: [tableData[0]],
  body: tableData.slice(1),
  // 全局表头加粗
  headStyles: {
    fontStyle: 'bold'
  },
  // 针对第一列单独设置（优先级更高）
  columnStyles: {
    0: { // 列索引从0开始，对应User Id列
      fontStyle: 'bold'
    }
  }
});

doc.save('user-table.pdf');

2. 表头单元格未被正确识别 #

如果表头是动态生成的，可能第一列单元格未被纳入head配置，或循环设置样式时漏掉了第一列。

修复方法：检查head数组结构，确保第一列数据存在，遍历表头时包含第一列。

示例代码（手动绘制表格场景）：

const doc = new jsPDF();
const headers = ["User Id", "Name", "Email"];
const rows = [["1", "John Doe", "john@example.com"], ["2", "Jane Smith", "jane@example.com"]];

let yPos = 20;
// 绘制表头
doc.setFont("helvetica", "bold");
headers.forEach((header, index) => {
  // 强制第一列使用加粗字体
  if (index === 0) {
    doc.setFont("helvetica", "bold");
  }
  doc.text(header, 20 + index * 50, yPos);
});
yPos += 10;

// 绘制表格内容
doc.setFont("helvetica", "normal");
rows.forEach(row => {
  row.forEach((cell, index) => {
    doc.text(cell, 20 + index * 50, yPos);
  });
  yPos += 10;
});

doc.save('user-table.pdf');

3. 字体加载异常 #

如果使用自定义字体，可能加粗字体未正确注册到jsPDF，导致第一列无法显示加粗效果。

修复方法：确保加粗字体已正确注册。

示例代码：

// 注册Helvetica加粗字体
doc.addFont('Helvetica-Bold', 'Helvetica', 'bold');

// 使用时指定加粗字体
doc.setFont("Helvetica", "bold");

排查步骤 #

• 检查控制台是否有字体加载或样式相关的报错
• 打印head数组和columnStyles配置，确认第一列样式已正确设置
• 简化代码，仅保留表头和第一列，测试是否能正常加粗

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