使用jsPDF创建动态PDF调用table方法报错如何解决

需要实现客户端可下载的动态PDF，文本内容变化时对应元素位置可自动调整。

• 表头配置为如下格式的对象数组：

[
    {
        "title": "Vagas Ocupadas",
        "dataKey": "occupiedVacancies"
    },
    {
        "title": "Total de pés",
        "dataKey": "totalFeet"
    },
    {
        "title": "ID",
        "dataKey": "id"
    },
    {
        "title": "Local",
        "dataKey": "movementLocation"
    }
];

• 表格内容数据为如下格式的对象数组：

[
    {
        "occupiedVacancies": "---",
        "totalFeet": "---",
        "id": 1,
        "movementLocation": "Poita"
    },
    
    {
        "occupiedVacancies": "---",
        "totalFeet": "---",
        "id": 8,
        "movementLocation": "Garagem2"
    },
    {
        "occupiedVacancies": 6,
        "totalFeet": 471,
        "id": 9,
        "movementLocation": "Garagem"
    }
];

使用如下代码尝试实现功能：

let doc = new jsPDF({ orientation: 'landscape', unit: 'px', floatPrecision: 2 });
doc.setFont('Courier');
doc.table(20, 30, this.exportData, this.cols, {printHeaders: true, autoSize: true});
doc.save();

运行后抛出错误：

getTextDimensions expects text-parameter to be of type String or type Number or an Array of Strings.

抛出这个错误的核心原因是jsPDF计算文本渲染尺寸时，接收到的待渲染内容不符合支持的类型，具体触发点有两个：

• 调用的jsPDF内置table方法，列配置里匹配数据字段的属性名是key，不是当前代码里写的dataKey。插件找不到对应字段值时，会把整个行对象传入文本计算逻辑，直接触发类型校验报错
• 旧版本内置table插件对数字、字符串混合的单元格值兼容有缺陷，哪怕类型是报错信息里提到的支持的Number类型，也可能在隐式转换时触发异常。

方案1：不额外引入依赖，适配内置table API #

只需要两步调整即可解决报错：

1. 把列配置里的dataKey字段统一替换为key，匹配内置插件的参数要求
2. 遍历表格数据，把所有单元格值统一转为字符串类型，规避类型兼容问题
   调整后的可运行代码：

// 处理列配置
const tableCols = this.cols.map(col => ({
  title: col.title,
  key: col.dataKey
}))
// 处理表格数据，统一转字符串
const tableData = this.exportData.map(row => {
  const processed = {}
  for (const field in row) {
    processed[field] = String(row[field])
  }
  return processed
})

const doc = new jsPDF({ orientation: 'landscape', unit: 'px', floatPrecision: 2 });
doc.setFont('Courier');
doc.table(20, 30, tableData, tableCols, {printHeaders: true, autoSize: true});
doc.save('导出文件.pdf');

方案2：使用AutoTable插件（更适配动态内容场景） #

jsPDF内置的table插件自动布局能力很差，文本长度变化时很容易出现列错位、内容溢出的问题，如果需要更好的动态位置适配，推荐搭配AutoTable插件使用。它原生支持当前的dataKey配置格式，自动兼容各类单元格值，还会根据内容长度自动调整列宽、行高，长文本自动换行，完全匹配动态内容的渲染需求。
引入插件后代码可以简化为：

const doc = new jsPDF({ orientation: 'landscape', unit: 'px', floatPrecision: 2 });
doc.setFont('Courier');
autoTable(doc, {
  startX: 20,
  startY: 30,
  columns: this.cols,
  body: this.exportData,
  styles: {
    font: 'Courier'
  }
})
doc.save('导出文件.pdf');

这个方案不需要手动调整任何元素位置，插件会自动完成所有布局计算。

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