Problem with <br> and \n in simple table
See original GitHub issueHello,
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 :
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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
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