我正在使用 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。
有什么办法可以解决这个问题吗?提前致谢。