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.

Possible enhancement: autoTableHtmlToJson() might return inner HTML text inside cells

See original GitHub issue

Sometimes, the content of a table cell is not plain text, but HTML. However, on those cases autoTableHtmlToJson() function returns blank string.

Don’t worry. It’s very easy to fix this misbehaviour. At line 1998 in version 2.0.33, simply change this one: var val = cell ? cell.textContent.trim() : ''; by this other: var val = cell ? cell.innerHTML.trim() : '';

In future versions of AutoTable, it would be nice to have a third param for autoTableHtmlToJson() function, something like “HTML = false” in case you want to get only text content, or “HTML = true” in case you want to get all the raw content.

When HTML = true, after calling autoTableHtmlToJson() you could get whatever you want from the HTML data retrieved of those cells that contains HTML. For the cells with only plain text, you do not need to do anything.

For instance:

var res = pdf.autoTableHtmlToJson(document.getElementById("table_cust"), true, true);  // note the third param here! Inner HTML will be returned.

// Now, we are going to do some things with the data
for (i = 0; i < res.data.length-1; i++) {
    // Get image path of column 6
    if (res.data[i][6] != '')
        res.data[i][6] = $(res.data[i][6]).attr('src');  // Originally, this table cell contained <img alt='' src='../../img/test1.png' />
    // Force to put blank string for column 7
    if (res.data[i][7] != '')
        res.data[i][7] = '';
}
// Last row has formatted total values in columns 1 and 5 (i.e. <div class='text-center'><b>1.250,00€</b></div>). But we only need the text:
res.data[res.data.length-1][1] = $(res.data[res.data.length-1][1]).text();
res.data[res.data.length-1][5] = $(res.data[res.data.length-1][5]).text();

Regards!

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
razorrazorcommented, Aug 5, 2016

That’s not a trouble to me, but your second alternative sounds good. In that case, it would be easy to get any attribute value on createdCell event using querySelector (I didn’t know of the existence of this function). You’re the master. It’s up to you 😉

0reactions
tbiinfotechcommented, Jan 23, 2018

Can I use html under autoTable cell or there is no way to do it?

Read more comments on GitHub >

github_iconTop Results From Across the Web

simonbengtsson/jsPDF-AutoTable - Gitter
Hi I am using jspdf-auto table. I have used it to generate table from mysql. The table has dates in first column which...
Read more >
Can't Change the innerHTML of a Table Cell - Stack Overflow
When I test it, I get this error: Uncaught TypeError: Property 'innerHTML' of object #HTMLTableCellElement is not a function. I don't know why, ......
Read more >
jspdf-autotable: Versions - Openbase
autoTableHtmlToJson now always returns an object with seperate columns and rows properties; Use API.autoTableEndPosY() instead of API.autoTableEndPos() ...
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