如何修改jsPDF表格字体？setFont仅更改标题字体

云原生阿岚

2026-7-16

解决jsPDF表格自定义字体不生效问题

问题分析

你使用的doc.table方法来自jspdf-autotable插件，直接在styles中设置font无效，核心原因是插件对自定义字体的配置需要明确指定表头、表体的样式，或参数格式不符合插件要求。

解决方案

1. 确认字体注册逻辑正确

你已完成的字体VFS添加与注册步骤是正确的，无需修改：

doc.addFileToVFS('NEWFONT.TTF', NEWFONTS);
doc.addFont('NEWFONT.TTF', 'newFontType', 'normal');

2. 修改表格生成代码

将原doc.table调用替换为插件标准配置方式，明确指定全表格字体：

// 替换原有的 doc.table(10, 30, this.data, header);
doc.autoTable({
  startX: 10,
  startY: 30,
  head: [header], // 表头需嵌套为二维数组
  body: this.data,
  styles: {
    font: 'newFontType', // 指定自定义字体名称
    fontSize: 12
  },
  headStyles: {
    font: 'newFontType' // 单独指定表头字体，覆盖默认样式
  },
  bodyStyles: {
    font: 'newFontType' // 单独指定表体内容字体
  }
});

3. 兼容别名调用（如果项目用`doc.table`作为别名）

若你的项目中doc.table是autoTable的别名，可直接补充完整样式参数：

doc.table(10, 30, this.data, header, {
  styles: { font: 'newFontType' },
  headStyles: { font: 'newFontType' },
  bodyStyles: { font: 'newFontType' }
});