I am using jsPDF-autotable to create a PDF from an HTML table. I have some div elements inside a td cell, and some of them have a strong element. I only want to make the div that has the strong element bold, but not the other divs in the same cell. I have tried using CSS font-weight property, document.execCommand('bold'), and <b>
tag, but none of them work. Here is my code:
doc.autoTable({
html: tableEl.querySelector('table'),
startY: 10,
margin: { top: 40 },
didParseCell: function(data) {
if (data.cell.raw.querySelector('div')) {
let divs = data.cell.raw.querySelectorAll('div');
let textArray = Array.from(divs, div => div.textContent.trim()).filter(text => text);
let formattedText = [];
for (let i = 0; i < textArray.length; i++) {
formattedText.push(textArray[i]);
}
data.cell.text = formattedText;
for (let i = 0; i < divs.length; i++) {
if (divs[i].querySelector('strong')) {
console.log(divs[i]);
//data.cell.styles.fontWeight = "bold";
//document.execCommand('bold');
//divs[i].innerHTML = "<b>" + divs[i].textContent + "</b>";
}
}
}
}
});
The HTML table could look like this:
<table>
<th>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</th>
<tr>
<td>Tomato</td>
<td>Orange</td>
<td>
<div>Pear</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<div>Strawberry</div>
<div><strong>Banana</strong></div>
<div>Apple</div>
</td>
</tr>
</table>
I have a bold font: Roboto-Bold
. If I set data.cell.styles.font = 'Roboto-Bold'
the text is bold, but the entire td cell, not just the div with <strong>
element.
Is there any way to solve this problem? Thanks in advance.