Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multi-line text in a cell loses its newline characters

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

4reactions

simonbengtssoncommented, Jan 5, 2019

Try v3 released today and see if it works there!

1reaction

SamueleCaprioli97commented, Jul 21, 2020

Thanks @glebov21 but I solved in this way:

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')