jsPDF-AutoTable中如何让页脚列与数据列内容对齐方式一致？

问题描述 #

使用jsPDF-Autotable生成带4行页脚的PDF表格：

• 第1行：指定数值列求和（SUMS）结果
• 第2行：指定数值列平均值（AVERAGES）结果
• 第3行：指定数值列最小值（MIN）结果
• 第4行：指定数值列最大值（MAX）结果

需求是让数值类列内容右对齐，且页脚的计算结果和对应正文列的对齐规则保持一致。目前已经掌握正文列的对齐设置方法，但找不到页脚按列设置对齐的配置项，尝试使用不存在的footerColumnStyles属性无效，相关代码如下：

body: data,
columnStyles: {[key: string]: Partial<Styles>} = {
                        0: {halign: 'right' },
                        3: {halign: 'justify'},
                        5: {halign: 'center' },
                        8: {halign: 'left' },
                      },
foot: footData,
// 预期存在的配置，但库本身不支持
// footerColumnStyles: {[key: string]: Partial<Styles>} = {
//                     0: {halign: 'right' },
//                     3: {halign: 'justify'},
//                     5: {halign: 'center' },
//                     8: {halign: 'left' },
//                   },

实现方法 #

jsPDF-Autotable 没有提供独立的footerColumnStyles配置项，通过内置的didParseCell钩子即可实现按列配置页脚对齐，还能直接复用正文的列样式规则，不用重复写配置：

// 抽离公共列对齐规则，正文、页脚共用
const columnAlignRules = {
  0: {halign: 'right' },
  3: {halign: 'justify'},
  5: {halign: 'center' },
  8: {halign: 'left' },
}

autoTable(doc, {
  body: data,
  foot: footData,
  columnStyles: columnAlignRules,
  didParseCell: (hookData) => {
    // 识别当前单元格属于页脚区域时，复用对应列的对齐规则
    if (hookData.section === 'foot') {
      const colIdx = hookData.column.index
      if (columnAlignRules[colIdx]?.halign) {
        hookData.cell.styles.halign = columnAlignRules[colIdx].halign
      }
    }
  }
})

如果需要给页脚设置和正文不同的对齐规则，直接在上面的didParseCell判断逻辑里，单独给页脚单元格按列索引配置halign值即可，效果和预期的footerColumnStyles完全一致。

注意：全局footStyles属性是给所有页脚单元格设置统一样式的，不支持按列单独配置，无法满足列级对齐需求。

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