NiceToMytyuk
NiceToMytyuk

Reputation: 4327

issue while using JsPdf AutoTable setting newline on 'd' and other characters

I' using jsPDF with AutoTable in my WebSite, and there is an issue when i'm exporting my Table to PDF.

When the PDF contains 'd' letter in the string in a column, after the 'd' jsPDF will set a newline by breaking a word and by making the PDF unreadable.

There were other cases even with other characters like number '2'.

Is there a way to fix it?

Here is how it looks like when exported: enter image description here

While the text breaked was:

antipasto con gnocco patate  + spergola
bimbi verdi + tagliatella ragù
tortello verde + riso
misto carni arrosto con patate e padleda
Alessandra cioccolatina con smarties

My function where i make the jsPDF looks like this:

function PDF(id, stat) {
    var doc = new jsPDF('l', 'pt', 'a4', true);
    var table = '#' + id;
    var text = 'Prenotazioni del ' + moment($("#day").attr('data-giorno')).format('DD MMMM YYYY');

    doc.setFontSize(18);
    doc.text($('#titlepdf').val(), 14, 22);
    doc.setFontSize(11);
    doc.setTextColor(100);

    doc.text(text, 14, 35);

    doc.autoTable({
        html: table,
        startY: 45,
        showHead: 'firstPage',
        includeHiddenHtml: true,
        columnStyles: {
            0: {
                columnWidth: 80
            },
            1: {
                columnWidth: 50
            },
            2: {
                columnWidth: 50
            },
            3: {
                columnWidth: 50
            },
            4: {
                columnWidth: 100
            },
            5: {
                columnWidth: 200
            }
        },
        headStyles: {
            fillColor: [189, 21, 63],
            fontSize: 10,
            theme: 'grid'
        },
        styles: {
            overflow: 'linebreak',
            columnWidth: 'wrap',
            font: 'arial',
            fontSize: 10,
            cellPadding: 8,
            overflowColumns: 'linebreak'
        }
    });

    doc.text(stat, 14, doc.autoTable.previous.finalY + 15);

    doc.save('prenotazione.pdf');
}

Here is the table:

<table id="tableGiorno" class="table table-hover" style="margin-bottom: 0px; font-size: 12px;">
    <thead>
        <tr>
            <th>Nome</th>
            <th>Orario</th>
            <th>Tavolo</th>
            <th>Coperti</th>
            <th>Telefono</th>
            <th>Note</th>
        </tr>
    </thead>
    <tbody id="bodyGiorno">
        <tr data-tavolo="34">
            <td>Igor</td>
            <td>14:00</td>
            <td>4</td>
            <td>1</td>
            <td>
                <a onclick="event.stopImmediatePropagation();" href="tel:" rel="nofollow"></a>
            </td>
            <td>Da oggi sono stato fedele grazie alla lorem</td>
        </tr>
    </tbody>
</table>

Upvotes: 8

Views: 1574

Answers (2)

Mir
Mir

Reputation: 50

This issue is precisely for the lower versions fo the jsPDF. If you upgrade to the latest version i.e. >(2.3), the issue will get resolved.

Upvotes: -1

NiceToMytyuk
NiceToMytyuk

Reputation: 4327

Solved by changing the jsPDF version to the last one (2.3.1) i was using the 1.5.3.

Upvotes: 4

Related Questions