question-mark
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.

Problem with <br> and \n in simple table

See original GitHub issue

Hello, I use ‘autoTable’ to create a simple table. Everything works fine, but I can not do line breaks with the '<br>' tag or \n in cells.

Can you help me ?

My code :

var columns = [
    {title: "Nom", dataKey: "nom"},
    {title: "Prenom", dataKey: "prenom"}, 
    {title: "Identification", dataKey: "identification"},
    {title: "Date Naissance", dataKey: "date_naissance"},
    {title: "Age", dataKey: "age"},
    {title: "Sexe", dataKey: "sexe"},
    {title: "Nationalité", dataKey: "nationalite"},
    {title: "Adresse", dataKey: "adresse"},
    {title: "Commentaire", dataKey: "commentaire"},
    {title: "Type d'intervention", dataKey: "type_intervention"},
    {title: "Centre d'accueil", dataKey: "centre_accueil"},
];
    
var rows = data_table_pdf; // Array for rows, eg : [{nom:'Mon<br>nom', prenom:'Mon<\n>prenom'}]
var doc = new jsPDF('landscape', 'pt');
    
doc.autoTable(columns, rows, {
    theme: 'striped',
    styles: {columnWidth: 'auto'},
    columnStyles: {},
    // Properties
    overflow:'linebreak',
    startY: false, // false (indicates margin top value) or a number
    margin: 40, // a number, array or object
    pageBreak: 'auto', // 'auto', 'avoid' or 'always'
    tableWidth: 'auto', // 'auto', 'wrap' or a number, 
    showHeader: 'everyPage', // 'everyPage', 'firstPage', 'never',
    tableLineColor: 200, // number, array (see color section below)
    tableLineWidth: 0,
    addPageContent: function(data) {
    	doc.text("Bilan des victimes", 40, 30);
    }
});

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

Result : sans titre

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
arjunkolagatlacommented, Aug 4, 2018

@webdream-fr @simonbengtsson

I have added below hack to render HTML in table cells, hope it helps.

File: jspdf.plugin.autotable.js Method name: jsPDF.API.autoTableText line around 2946

After this below code if (typeof x !== 'number' || typeof y !== 'number') { console.error('The x and y parameters are required. Missing for the text: ', text); }

Please add below code

if (/<[a-z][\s\S]*>/i.test(text)) {
						text = text.join(' ');
						const div = document.createElement('div');
						div.innerHTML = text;
						text = div.innerHTML;
						this.fromHTML('<div style="font-family: helvetica; font-size: 12px; ">' + text + '</div>', x, y, { // y coord
							'width': 120
						});
						return this;
					}
1reaction
webwakkocommented, May 10, 2019

good solution from @simonbengtsson … but I would suggest adding it like this:

<br>\n

This way the code that might be displayed on the page, before exporting will still be fine also

Read more comments on GitHub >

github_iconTop Results From Across the Web

Line Break (\n) is not working as expected - Stack Overflow
Use <br /> and not \n. //this data comes from server via ajax response var rows = []; var row1 = {}; row1.Name...
Read more >
Tables in HTML documents
The HTML table model allows authors to arrange data -- text, preformatted text ... the current COLGROUP element defines a column group containing...
Read more >
<br>: The Line Break element - HTML - MDN Web Docs - Mozilla
The <br> element has a single, well-defined purpose — to create a line break in a block of text. As such, it has...
Read more >
I don't understand the function of "br" tag here. (Table lesson ...
I don't understand the function of "br" tag here. (Table lesson no-2) · + 4. remember that they are tag, no functions. br...
Read more >
How to add a forced line break inside a table cell - TeX
You can switch your cell layout to paragraph to use the \newline command. ... Here's a very simple way to do it, using...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found