I'm trying to draw a table which is larger than the page height, so I found that I can use pageBreak:avoid to split the table into multiple pages, and it does, but for some reason it leaves the first page empty and begin the table in the second one, I've tried to solve it with didDrawPage but I can't get a solution yet `const doc = new jsPDF({ orientation: "landscape", unit: "mm", format: "a4", });
doc.addImage(
require("@/assets/images/logo/logoEtiqueta.png"),
"PNG",
250,
5,
40,
30
);
fecha_inicio = moment(this.formInforme.fecha_inicio).format(
"DD/MM/YYYY"
);
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);
let rep_solicitudes = [];
this.solicitudes.forEach((sol) => {
var solicitud = {
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"),
};
rep_solicitudes.push(solicitud);
});
let startY = 40;
let currentPage = 1;
let height = doc.internal.pageSize.getHeight();
doc.autoTable({
headStyles: { fillColor: [0, 40, 108] },
pageBreak: "avoid",
startY: startY,
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",
didDrawPage: (data) => {
let table_height = data.cursor.y
if (startY + table_height + 10 > height) {
startY = 15;
currentPage++;
console.log(currentPage);
}
},
});
doc.save(doc_name);`
I'm still getting the table put in the second page instead of in the first page
After some research, I found that didDrawPage wasn't necessary, just set 'pageBreak' to 'auto', and add 'rowPageBreak' to 'avoid' :) and the table will break on multiple pages and start in the first page