Is there any way to solve the page break row Span issues in pdfKit Table?

Question

I am using PDFKit library to build a table in my nodejs project. There are no issues if the table can fit in one page. The table break into next page when there are no enough spaces to fit the whole table, this will cause the first column which has merged together with other rows move down and make it not tallied with other column.

is there any solution to fix this?

My code:

const PDFDocument = require('pdfkit'); const fs = require('fs'); const doc = new PDFDocument(); doc.pipe(fs.createWriteStream('file.pdf')); // write to PDF doc.table({ data: [ [ { rowSpan: 22, border: true, backgroundColor: "#eef", text: "rowSpan: 3\n\nborder:\ntrue" }, { border: undefined, backgroundColor: "#eee", text: "border:\nundefined (default)" }, { border: [false, false, false, true], backgroundColor: "#ddd", text: "border:\n[false, false, false, true]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], [ { border: 0, backgroundColor: "#eee", text: "border:\n0 (same as false)" }, { border: [false, true, true, false], backgroundColor: "#ddd", text: "border:\n[false, true, true, false]" }, ], ], }) // finalize the PDF and end the stream doc.end();

The Result:

picobaz · Accepted Answer · 2025-08-28 09:42:40Z

use this

const PDFDocument = require('pdfkit'); const doc = new PDFDocument(); function drawTable(data, startY) { let y = startY; const rowHeight = 20; const pageHeight = doc.page.height - doc.page.margins.bottom; data.forEach((row, rowIndex) => { if (y + rowHeight > pageHeight) { doc.addPage(); y = doc.page.margins.top; } row.forEach((cell, colIndex) => { if (cell.rowSpan && rowIndex === 0) { doc.rect(colIndex * 100, y, 100, rowHeight * cell.rowSpan).fill('#eef'); doc.text(cell.text, colIndex * 100 + 5, y + 5); } else if (!cell.rowSpan) { doc.rect(colIndex * 100, y, 100, rowHeight).fill(cell.backgroundColor); doc.text(cell.text, colIndex * 100 + 5, y + 5); } }); y += rowHeight; }); } drawTable(yourData, 50); doc.end();

Put your own values instead of "yourData".

Collectives™ on Stack Overflow

Is there any way to solve the page break row Span issues in pdfKit Table?

1 Answer 1

use this

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

use this

Comments

Related