jsPDF autoTable设置pageBreak后第一页空白，表格跳转至第二页问题

问题原因 #

你遇到的问题是pageBreak:"avoid"的自动分页逻辑误判了第一页的剩余空间，认为从startY=40的位置开始无法放下表格头部及至少一行内容，因此直接跳转到第二页绘制。同时你手动在didDrawPage里修改startY的逻辑不仅无效，还可能干扰autoTable的默认分页计算。

解决方案 #

1. 移除错误的分页回调逻辑 #

删掉didDrawPage回调，autoTable的pageBreak:"avoid"参数本身就能自动处理分页，不需要手动干预页码和startY。

2. 确保第一页剩余空间足够 #

通过设置margin参数替代单独的startY，让插件更准确计算可用空间，避免误判分页。

修改后的完整代码 #

const doc = new jsPDF({
  orientation: "landscape",
  unit: "mm",
  format: "a4",
});

doc.addImage(
  require("@/assets/images/logo/logoEtiqueta.png"),
  "PNG",
  250,
  5,
  40,
  30
);

const fecha_inicio = moment(this.formInforme.fecha_inicio).format("DD/MM/YYYY");
const fecha_fin = moment(this.formInforme.fecha_fin).format("DD/MM/YYYY");

// Título
doc.setFont("helvetica", "bold");
doc.setFontSize(24);
doc.text("Reporte Solicitudes Generadas", 12, 20);

doc.setFont("helvetica", "normal");
doc.setFontSize(16);
doc.text(`Del ${fecha_inicio} al ${fecha_fin}`, 12, 30);

const rep_solicitudes = this.solicitudes.map(sol => ({
  num_solicitud: sol.num_solicitud,
  tipo_solicitud: this.capitalizar(sol.tipo_solicitud),
  fecha_creacion: moment(sol.fecha).format("YYYY-MM-DD"),
  creado_por: sol.usu_creacion,
  prioridad: this.capitalizar(sol.prioridad),
  estado: this.capitalizar(sol.estado),
  establecimiento: sol.establecimiento[0].descripcion,
  departamento: sol.departamento[0].descripcion,
  fecha_plazo: moment(sol.fecha_plazo).format("YYYY-MM-DD"),
}));

doc.autoTable({
  headStyles: { fillColor: [0, 40, 108] },
  // 使用margin替代startY，让插件更准确计算顶部可用空间
  margin: { top: 40 },
  pageBreak: "avoid",
  styles: {
    fontSize: 10,
    font: "helvetica",
    halign: "center",
    valign: "middle",
  },
  head: [
    {
      num_solicitud: "N° SOLICITUD",
      tipo_solicitud: "TIPO SOLICITUD",
      fecha_creacion: "FECHA CREACIÓN",
      creado_por: "CREADA POR",
      prioridad: "PRIORIDAD",
      estado: "ESTADO",
      establecimiento: "ESTABLECIMIENTO",
      departamento: "DEPARTAMENTO",
      fecha_plazo: "FECHA PLAZO",
    },
  ],
  body: rep_solicitudes,
  theme: "striped",
});

doc.save(doc_name);

关键修改说明 #

• 移除didDrawPage回调：autoTable的分页逻辑不需要手动修改startY，插件会自动跟踪每页的绘制位置
• 用margin.top替代startY：这是autoTable推荐的设置顶部偏移的方式，能让插件更准确计算当前页面的可用空间，避免误判分页
• 简化数组转换逻辑：用map替代forEach+push，代码更简洁

如果仍然出现分页问题，可以尝试微调margin.top的值（比如改为35），确保表格头部能完全放在第一页的剩余空间里。

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