Table row on new page - height is single line

[thedomeffm]

Hi; the 'first table row' on the 'second page' is just one line height, but should be three. This behavior does not exist on the 'first table row' on 'page three'.

I think probably this is a bug?! It is just one big table.

GITHUB_EXAMPLE.pdf

Greetings

[rkusa]

Hi, this is definitely a bug, I'll look into it! Would you mind sharing the code that created this example PDF?

[rkusa]

I tried for a while, but I was unable to create a table that reproduces your issue, so I'd appreciate if you could post the code snippet you've used to create this table 🙏

[thedomeffm]

Hi, it is a bit messy but hopefully it helps out :)

import pdfjs from 'pdfjs';

export default function generatePDF(doc, report, client): void {
    doc.footer().pageNumber( (curr, total) => curr + ' / ' + total,
        {
            textAlign: 'right'
        });
    addRecipient(doc, report.recipient);
    addHeadline(doc);
    addInfoBox(doc, client, report);
    addTable(doc, report);
    addSignatureFooter(doc);
}

function addHeadline(doc) {
    const helveticaBold = require('pdfjs/font/Helvetica-Bold');

    const headlineCell = doc.cell({
        paddingTop: 3*pdfjs.cm,
        paddingBottom: 0.5*pdfjs.cm,
    });

    headlineCell.text('Text Text Text Text Text Text Text Text', {
        fontSize: 16,
        font: helveticaBold
    });
}

function addInfoBox(doc, client, report) {
    const moment = require('moment');
    const infoBox = doc.cell({
        paddingBottom: 0.5*pdfjs.cm,
    });

    infoBox.text(`von ${client.clientName}, ${client.zipCode} ${client.city}`);
    infoBox.text(`Mgl.-Nr ${client.settings[0].membershipNumber || '-'}`);
    infoBox.text(`von ${moment(report.begin).format('DD.MM.YYYY')} bis ${moment(report.end).subtract(1, 'days').format('DD.MM.YYYY')}`);
}

function addRecipient(doc, recipient: any) {
    // push the recipient cell
    doc.cell({
        paddingBottom: 3.5*pdfjs.cm
    });

    const recipentCell = doc.cell({
        width: 8*pdfjs.cm,
        padding: 0.2*pdfjs.cm,
        borderWidth: 1,
        borderColor: 0x000000
    });

    if (recipient) {
        recipentCell.text({
            fontSize: 10,
            lineHeight: 1.20
        })
            .add(recipient.name).br()
            .add(recipient.streetAndHouseNumber).br()
            .add(`${recipient.zipCode} ${recipient.city}`)
    } else {
        recipentCell.text({
            fontSize: 10,
            lineHeight: 1.20
        })
            .add('name').br()
            .add('streetAndHouseNumber').br()
            .add('zipCode city')
    }
}

function addTable(doc, report) {
    const helveticaBold = require('pdfjs/font/Helvetica-Bold');

    const table = doc.table({
        widths: [2.5*pdfjs.cm, 2.8*pdfjs.cm, null, 2.5*pdfjs.cm, 2*pdfjs.cm],
        padding: 5,
        fontSize: 10,
        borderHorizontalWidth: 1
    });

    const tr = table.row({
        font: helveticaBold,
    });

    tr.cell('Text Text Text Text Text');
    tr.cell().text('Text Text Text,').text('Ort', {
        font: helveticaBold,
        fontSize: 10,
    });
    tr.cell('Text Text Text');
    tr.cell('Text Text Text');
    tr.cell().text('abzuf.').text('Betrag', {
        font: helveticaBold,
        fontSize: 10,
    });

    for (const eventGroup of report.settings) {
        addEventGroupRow(table, eventGroup.eventGroupName, eventGroup.amount, helveticaBold);
        for (const event of eventGroup.events) {
            addEventRow(table, event.date, event.location, event.city, event.name, event.amount);
        }
    }

    const row = table.row({
        font: helveticaBold,
        lineHeight: 1.6,
    });

    row.cell('Gesamtsumme', {
        colspan: 3,
    });
    row.cell(report.totalAmount.toString());
    row.cell('');
    doc.cell({
        // to fake the last border
        borderTopWidth: 1
    });
}

function addEventGroupRow(table: any, name: string, amount: number, font: string) {
    const tr = table.row({ font });

    tr.cell(name, { colspan: 3 });
    tr.cell(amount.toString());
}

function addEventRow(table, date, location, city, name, amount) {
    const moment = require('moment');

    const tr = table.row();
    tr.cell(moment(date).format('DD.MM.YYYY'));
    tr.cell(location + ', ' + city);
    tr.cell(name);
    tr.cell(amount.toString());
}

function addSignatureFooter(doc) {
    // push
    doc.cell({
        paddingBottom: 2.5*pdfjs.cm
    });

    const table = doc.table({
        widths: [4.25*pdfjs.cm, null, 4.25*pdfjs.cm, null, 4.25*pdfjs.cm],
    });

    const trLines = table.row();
    trLines.cell().text('___________________', { textAlign: 'center' });
    trLines.cell('');
    trLines.cell().text('___________________', { textAlign: 'center' });
    trLines.cell('');
    trLines.cell().text('___________________', { textAlign: 'center' });

    const trLetters = table.row();
    trLetters.cell().text('Ort, Datum', { textAlign: 'center' });
    trLetters.cell('');
    trLetters.cell().text('Unterschrift', { textAlign: 'center' });
    trLetters.cell('');
    trLetters.cell().text('Stempel Rechtsträger', { textAlign: 'center' });
}

[rkusa]

Do you maybe also have the report data you use to create the PDF with the issue?

[rkusa]

Might be fixed in v2.3.4 (https://github.com/rkusa/pdfjs/issues/191)