如何使用 jsPDF-autotable 使单元格中的部分文本变为粗体?

问题描述 投票:0回答:0

我正在使用 jsPDF-autotable 从 HTML 表格创建 PDF。我在 td 单元格中有一些 div 元素,其中一些元素具有 strong 元素。我只想将具有强元素的 div 设为粗体,而不是将同一单元格中的其他 div 设为粗体。我尝试使用 CSS 字体粗细属性、document.execCommand('bold') 和

<b>
标签,但它们都不起作用。这是我的代码:

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>";
        }
      }
    }
  }
});

HTML 表格可能如下所示:

<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>

我有一个粗体字:

Roboto-Bold
。如果我设置
data.cell.styles.font = 'Roboto-Bold'
文本是粗体,但整个 td 单元格,而不仅仅是带有
<strong>
元素的 div。 有什么办法可以解决这个问题吗?提前致谢。

javascript html jspdf jspdf-autotable pdf-conversion
© www.soinside.com 2019 - 2024. All rights reserved.