如何用jsPDF-autotable设置表格单元格内部分文本为粗体？

要实现单个单元格内仅指定文本（含strong标签的div内容）粗体，需利用jsPDF-autotable的富文本数组特性——每个文本行可单独配置样式，而非给整个单元格设置统一样式。具体修改如下：

修改后的代码 #

doc.autoTable({
  html: tableEl.querySelector('table'),
  startY: 10,
  margin: { top: 40 },
  didParseCell: function(data) {
    if (data.cell.raw.querySelector('div')) {
      const divs = data.cell.raw.querySelectorAll('div');
      const formattedText = [];

      // 遍历每个div，生成带样式的文本项
      divs.forEach(div => {
        const text = div.textContent.trim();
        if (!text) return;
        
        // 判断当前div是否包含strong标签
        const hasStrong = div.querySelector('strong') !== null;
        const textItem = {
          text: text,
          styles: {}
        };
        
        // 给含strong的文本设置粗体样式
        if (hasStrong) {
          // 已引入Roboto-Bold的话，直接指定字体
          textItem.styles.font = 'Roboto-Bold';
          // 若默认字体支持fontWeight，也可替换为：
          // textItem.styles.fontWeight = 'bold';
        }
        
        formattedText.push(textItem);
      });

      // 替换单元格文本为带样式的数组
      data.cell.text = formattedText;
    }
  }
});

关键说明 #

• jsPDF-autotable允许data.cell.text接收对象数组，每个对象包含text（文本内容）和styles（样式配置）属性，可单独控制该行文本的显示样式。
• 通过div.querySelector('strong')精准判断目标文本，避免整个单元格样式被统一覆盖。
• 若已通过doc.addFont正确注册Roboto-Bold字体，使用font: 'Roboto-Bold'比fontWeight更可靠——部分字体可能不支持动态切换fontWeight属性。

额外检查 #

确保你已完成Roboto-Bold字体的注册，示例代码如下：

// 请根据实际文件路径调整
doc.addFont('Roboto-Bold.ttf', 'Roboto-Bold', 'bold');

内容的提问来源于stack exchange，提问作者Storm1