如何使用jsPDF将数组数据导出为PDF并实现表格自动分页？

首次使用 jsPDF 导出数据为 PDF 文件时，导出数组内容一直报错。未找到对应官方说明，最初尝试用 doc.table 方法导出数组，也没有搜到同类问题的解决思路。

最初的实现代码：

const generatePDF = () => {
      var doc = new jsPDF('landscape', 'px', 'a4', 'false');
      doc.addImage(AIBLogo, 'PNG', 250,10,100,100)

      doc.setFont('Helvertica', "bold")
      doc.text(60,150, "Informacion del Pedido");
      
      doc.setFont('Helvertica', "Normal")
      doc.text(60,170, "Estado del Pago: "+estadoDePago)
      doc.text(60,190, "Estado de Disponibilidad: "+estadoDeDisponibilidad)
      doc.text(60,210, "Total del Pedido: "+total)
      doc.text(60,230, "Total Pagado: "+totalPagado)

      doc.setFont('Helvertica', "bold")
      doc.text(360,150, "Informacion del Estudiante");

      doc.setFont('Helvertica', "Normal")
      doc.text(360,170, "Nombre del Estudiante: "+nombre)
      doc.text(360,190, "Escuela: "+escuela)
      doc.text(360,210, "Estado del Pago: "+grado)
      doc.text(360,240, "Direccion de Entrega: Retirar en institución")

      doc.table(100,100, librosData)
      
      doc.save(id+".pdf")
    }

移除表格相关代码后，导出的PDF效果如下：

实际需要在现有内容后插入存储数组数据的表格，表格最多20条数据，超出页面范围时要自动分页。

后续参照公开方案调整代码后，仍然无法正常运行，调整后的代码如下：

var col = ["Descripcion", "Tipo", "Editorial","Precio"]
  row = []
  
  for (let i = 0; i < librosData.length; i++){
    var temp = [librosData[i].descripcion, librosData[i].tipo, librosData[i].editorial, librosData[i].precio];
    row.push(temp)
 }
  
 doc.autoTable(col,row, {startY:380});
 doc.save(id+".pdf")

此时运行的错误效果如下：

已确认所有接口返回数据正常，row数组打印内容如下：

最终解决方法 #

如果出现 autotable is not a function 报错，先检查依赖引入顺序：必须先引入jsPDF核心库，再引入autoTable扩展插件。如果是npm模块化引入的场景，需要手动将autoTable挂载到jsPDF实例上，常见的挂载代码如下：

import jsPDF from 'jspdf'
import autoTable from 'jspdf-autotable'

autoTable(jsPDF)

调整后即可正常调用autoTable方法生成表格，插件本身默认支持内容超出页面时自动分页，无需额外配置。

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