Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 738
NiceToMytyuk Avatar asked Nov 16 '20 10:11

NiceToMytyuk


1 Answers

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

like image 61
NiceToMytyuk Avatar answered Sep 24 '22 11:09

NiceToMytyuk