1

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.

Storm1
  • 199
  • 1
  • 1
  • 10

0 Answers0