Jspdf-autotable: Multi-line text in a cell loses its newline characters

Created on 2 Jan 2019 · 6Comments · Source: simonbengtsson/jsPDF-AutoTable

I upgraded my jsPDF and autotable to the latest versions recently, and I am encountering an issue where if I am placing multiple paragraphs of text in a table cell, the newline characters are lost and my paragraphs get merged into a single line. E.g, if I had the following text in a cell:

Line 1

Line 2

Line 3

After printing to PDF it would show as:

Line 1 Line 2 Line 3

Below is an example which reproduces the issue:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script> <!-- jsPDF v1.5.3-->
    <script type="text/javascript" src="jspdf.plugin.autotable.js"></script> <!-- AutoTable v3 RC 2  -->
    <script>
        function savePdf() {

            var elem = document.getElementById('testTable');
            var doc = new jsPDF('p', 'pt', 'letter');

            doc.autoTable(
                {
                    html: elem,
                    theme: 'grid',
                    startY: '70',
                    margin: { top: 70, horizontal: 40, bottom: 60 },
                    columnStyles: {
                        0: { cellWidth: doc.internal.pageSize.width * 0.075 }, 
                        1: { cellWidth: doc.internal.pageSize.width * 0.075 }, 
                        2: { cellWidth: doc.internal.pageSize.width * 0.1 }, 
                        3: { cellWidth: doc.internal.pageSize.width * 0.1 }, 
                        4: { cellWidth: doc.internal.pageSize.width * 0.6 - 2 * 40 },
                        5: { cellWidth: doc.internal.pageSize.width * 0.05 }
                    }
                }
            );

            doc.save("Test.pdf")
        }
    </script>
</head>
<body>
    <table id='testTable' border='1'>
        <thead>
            <tr>
                <th style='width:5%'>SER</td>
                <th style='width:7.5%'>TIME</td>
                <th style='width:12.5%'>TO</td>
                <th style='width:12.5%'>FROM</td>
                <th style='width:52.5%'>MESSAGE</td>
                <th style='width:4%'>INIT</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>4</td>
                <td>4444</td>
                <td>1</td>
                <td>2</td>
                <td>LINE1<br>LINE2<br>LINE3<br></td>
                <td>AA</td>
            </tr>
        </tbody>
    </table>
    <button id='savePdf' onclick='savePdf()'>EXPORT</button>
</body>
</html>

Issue 365 is encountered in this code as well.

Thank you in advance.

Source

dnlbaldwin

All 6 comments

Try v3 released today and see if it works there!

simonbengtsson on 5 Jan 2019

👎4

Hi, i have a similar issue but i can't resolve it. I need to show multiple IP's in the same cell like that:
192.168.1.1
192.168.1.2
192.168.1.3
but '\n' is ignored as shown below:

Can someone help me?
Thanks

SamueleCaprioli97 on 18 Mar 2019

same issue any solutions

Monikaprime on 2 Aug 2019

Is this issue resolved?

ahmadallo1 on 3 Jan 2020

Hi, i have a similar issue but i can't resolve it. I need to show multiple IP's in the same cell like that:
192.168.1.1
192.168.1.2
192.168.1.3
but '\n' is ignored as shown below:

Can someone help me?
Thanks

Just replace \n to <br/>: text.trim().replace(/\n/g, "<br />")

glebov21 on 21 Jul 2020

Thanks @glebov21 but I solved in this way:

```javascript
let bodyTable = [
{ title: 'Customer', value: this.customer },
{ title: 'Building', value: this.building }
// etc...
]
let ipList = ['192.168.1.1', '192.168.1.2', '192.168.1.3']
ipList.forEach((ip, index) => {
if (index === 0) {
bodyTable.push({ title: { rowSpan: ipList.length, content: 'Free IP', styles: { valign: 'middle' } }, value: ip })
} else {
bodyTable.push({ value: ip })
}
})
let doc = new JsPDF()
doc.setTextColor(57, 167, 80)
doc.text(10, 20, 'sheet')
doc.autoTable({
startY: 30,
showHead: false,
head: [{ title: '', value: '' }],
body: bodyTable
})
doc.save('my_document.pdf')
``````