如何为jsPDF Autotable设置表头颜色、行内容居中并添加标题与签名

jsPDF 的 AutoTable 插件不会读取页面 DOM 关联的 CSS 样式，所有自定义样式、额外内容都需要通过插件提供的配置项、原生 jsPDF API 实现，修改后的可实现需求的完整代码如下：

function generatePdf() {
  var doc = new jspdf.jsPDF();
  const pageWidth = doc.internal.pageSize.getWidth();

  // 1、添加表格上方居中标题
  const title = "贷款明细单"; // 可替换为实际需要的标题文本
  doc.setFontSize(16);
  doc.text(title, pageWidth / 2, 20, { align: "center" });

  doc.autoTable({
    html: '.tftable',
    startY: 30, // 控制表格从标题下方开始渲染，避免重叠
    // 全局样式配置
    styles: {
      halign: 'center', // 所有单元格文本水平居中，对应需求3
      valign: 'middle' // 可选：设置文本垂直居中
    },
    // 表头专属样式配置
    headStyles: {
      fillColor: '#2563eb', // 自定义表头背景色，可替换为任意颜色值，对应需求2
      textColor: '#ffffff' // 可选：同步调整表头文字颜色提高可读性
    },
    // 可选：配置奇偶行背景色区分，不需要可删除
    alternateRowStyles: {
      fillColor: '#f3f4f6'
    }
  });

  // 4、表格下方添加签名区块
  const tableEndY = doc.lastAutoTable.finalY; // 获取表格渲染完成的底部纵坐标
  doc.setFontSize(12);
  doc.text("签字确认：", pageWidth / 2, tableEndY + 30, { align: "center" });
  // 绘制签名横线
  doc.line(pageWidth / 2 - 60, tableEndY + 35, pageWidth / 2 + 60, tableEndY + 35);
  doc.text("经办人签字", pageWidth / 2, tableEndY + 50, { align: "center" });

  doc.save("detallePrestamo.pdf");
}
generatePdf()

各需求实现逻辑说明：

• 表格上方居中标题：调用jsPDF原生doc.text()方法，通过align: 'center'参数配合页面宽度的1/2作为X坐标实现水平居中，调整startY参数控制表格起始位置避免和标题重叠。
• 修改表头背景颜色：通过AutoTable内置的headStyles配置项设置fillColor属性即可修改表头背景，支持十六进制颜色、RGB数组等多种格式。
• 表格行内文本居中：在全局styles配置项中设置halign: 'center'，即可统一配置所有表头、内容单元格的文本水平居中，无需逐个调整单元格样式。
• 表格下方签名区块：通过doc.lastAutoTable.finalY获取表格渲染结束的底部Y轴坐标，在该坐标下方添加文本、绘制横线即可实现签名区，所有坐标数值可根据实际排版需求调整。

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