Angular环境下jsPDF的autoTable使用dataKey配置columnStyles不生效问题

安全阿岳

2026-9-26

问题解决方法

核心原因

dataKey 配置的列样式不生效，是因为当前的 body 数据结构不符合 autoTable 的 dataKey 匹配规则：
只有当 body 为键值对对象数组时，autoTable 才会识别 head 中定义的 dataKey，匹配对应列的样式；你当前用的是二维数组结构，autoTable 只会按列索引识别列，因此 dataKey 配置的样式无法生效。

具体修改步骤

调整 body 数据结构，将二维数组改为对象数组，对象的属性名和 head 中定义的 dataKey 完全对应：

body = [
  {
    MoreDescribe: ' قابل استفاده',
    properties: 'اندازه مناسب',
    id: '10000 تومان'
  },
  {
    MoreDescribe: ' قابل استفاده',
    properties: 'اندازه مناسب',
    id: '10000 تومان'
  },
  {
    MoreDescribe: ' قابل استفاده',
    properties: 'اندازه مناسب',
    id: '10000 تومان'
  }
]

调整 autoTable 调用配置，body 直接传入修改后的对象数组即可：

printAll(){
  const doc = new jsPDF();
  autoTable(doc, {
    head: [this.head],
    body: this.body,
    headStyles: { font: 'Shabnam',halign: 'center',valign: "middle"},
    bodyStyles: { font: 'Shabnam', halign: 'center', valign: "middle" },
    // 此处dataKey对应的样式即可正常生效
    columnStyles: {  
      id: { cellWidth: 50 },
      properties:{cellWidth:70},
      MoreDescribe:{cellWidth:80} 
    }
  })
  doc.save('导出文件.pdf')
}