Problem with <br> and \n in simple table

[webdream-fr]

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 :

[arjunkolagatla]

@simonbengtsson is this possible or any alternate to this ?

[arjunkolagatla]

@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;
					}

[simonbengtsson]

I might misunderstand but is this a feature request for adding support for automatically converting <br> to a new line with the autoTableHtmlToJson function? New lines can be added today by including a \n character as can be seen in the long text example.

[simonbengtsson]

The way to support this use case currently is by converting the
tags to \n characters before passing them to jspdf autotable. Or do it in a hook.

EDIT: <br> tags are automatically converted to new lines in the pdf in the latest version 👍

[webwakko]

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

[pallamollasai]

@arjunkolagatla thanks a lot.

[awyaawya]

@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;
					}

does this still work in the latest version of jspdf-autotable?