jsPDF + Autotable：能否为表格每行添加底部边框？

当然可以实现这个需求！jspdf-autotable的样式配置非常灵活，我给你两种常用的实现方式，你可以根据自己的场景选择：

方法一：通过全局样式配置快速实现 #

这种方法最简单，直接通过styles和headStyles关闭所有边框，只保留底部边框：

const doc = new jsPDF();

autoTable(doc, {
  head: [['Name', 'Email', 'Phone']],
  body: [
    ['John Doe', 'john@example.com', '123-456-7890'],
    ['Jane Smith', 'jane@example.com', '987-654-3210']
  ],
  // 全局设置：关闭所有边框，仅开启底部边框
  styles: {
    borderWidth: 0,
    borderBottomWidth: 0.5
  },
  // 单独给表头设置底部边框（如果需要和表体区分样式的话）
  headStyles: {
    borderBottomWidth: 1, // 表头底部线条可以粗一点
    borderWidth: 0
  }
});

doc.save('table-bottom-borders.pdf');

方法二：通过钩子函数自定义绘制线条 #

如果需要更灵活的样式控制（比如不同行用不同颜色、粗细的线条），可以用didDrawCell钩子手动绘制底部线条：

const doc = new jsPDF();

autoTable(doc, {
  head: [['Name', 'Email', 'Phone']],
  body: [
    ['John Doe', 'john@example.com', '123-456-7890'],
    ['Jane Smith', 'jane@example.com', '987-654-3210']
  ],
  // 先关闭所有默认边框
  styles: {
    border: 'none'
  },
  didDrawCell: (data) => {
    const { x, y, width, height } = data.cell;
    
    // 可以根据单元格所在区域调整样式
    if (data.section === 'head') {
      doc.setDrawColor(0); // 黑色
      doc.setLineWidth(1);
    } else {
      doc.setDrawColor(100); // 深灰色
      doc.setLineWidth(0.5);
    }
    
    // 绘制单元格底部的横线
    doc.line(x, y + height, x + width, y + height);
  }
});

doc.save('custom-table-borders.pdf');

这两种方法都能完美实现“仅显示单元格底部边框”的效果，第一种适合快速配置，第二种适合个性化定制～

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