如何在jsPDF autoTable单元格内混合使用粗体与常规文本？

嘿，这个需求我之前刚好处理过，用jsPDF的autoTable插件完全能实现单元格内的混合样式，具体操作分两步来：

1. 预处理数据，拆分带样式的内容 #

首先我们需要把类似"260.00 /roll"的字符串拆成两部分——需要加粗的数字部分和常规样式的单位部分，用autoTable支持的富文本对象数组来表示这部分内容。写个工具函数来批量处理：

// 处理单个单元格内容的函数，可根据实际格式调整正则
function formatCellContent(text) {
  // 匹配「数字（带小数） + 空格 + /单位」的格式
  const contentMatch = text.match(/^(\d+\.\d+) (\S+)$/);
  if (contentMatch) {
    return [
      { text: contentMatch[1], styles: { bold: true } }, // 数字设为粗体
      { text: ` ${contentMatch[2]}`, styles: { bold: false } } // 单位保持常规
    ];
  }
  // 不符合格式的内容直接返回原文本
  return text;
}

// 批量处理整个vData数组
const formattedVData = vData.map(row => 
  row.map(cell => typeof cell === 'string' ? formatCellContent(cell) : cell)
);

2. 调用autoTable生成带样式的PDF #

接下来只需要把处理好的formattedVData传入autoTable，同时确保配置项支持富文本（新版本autoTable默认支持，旧版本可以开启useCss）：

// 你的样式配置opt可以保留原有设置，按需添加富文本相关配置
const opt = {
  // 原有样式配置...比如字体、边框、对齐方式等
  useCss: true, // 旧版本插件可能需要开启这个来识别样式
  // 可选：如果需要更灵活的控制，可以用didParseCell钩子动态调整
  // didParseCell: (data) => {
  //   // 这里可以针对特定单元格做额外样式调整
  // }
};

// 生成表格并保存PDF
doc.autoTable(vHeader, formattedVData, opt);
doc.save('myTable');

小提示 #

• 如果你的内容格式不是数字+空格+/单位，比如是"260.00/roll"（无空格），可以把正则改成/^(\d+\.\d+)(\/\S+)$/，拆分后手动拼接空格即可。
• 建议使用最新版本的jsPDF和autoTable插件，旧版本对富文本对象的支持可能有限。
• 如果还有其他需要特殊样式的单元格，可以扩展这个工具函数，添加更多匹配规则。

这样处理后，PDF里的260.00就会显示为粗体，/roll保持常规样式啦~

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