如何在jsPDF中设置自定义文本实现局部加粗、下划线效果

jsPDF 原生doc.text()方法默认对整段文本应用统一样式，要实现局部加粗、局部下划线的效果，不需要额外插件，通过拆分片段逐段渲染即可实现，具体方案如下：

核心逻辑 #

把整段文本按样式边界拆成多个独立片段，从起始坐标开始逐段渲染：每段渲染前切换对应字体样式，渲染后计算当前片段的文本宽度，把X坐标向右偏移对应宽度，作为下一段的渲染起点即可。下划线如果遇到低版本API不支持的情况，直接在文本下方绘制等宽直线实现，兼容性更好。

可直接运行的代码示例 #

// 初始化jsPDF实例
const doc = new jsPDF()
// 按样式拆分文本片段
const textSegments = [
  { text: 'Nisi ', style: 'normal' },
  { text: 'nobis quae ', style: 'bold' },
  { text: 'minus explicabo ', style: 'normal' },
  { text: 'consequatur ', style: 'bold' },
  { text: 'dolores ', style: 'normal' },
  { text: 'blanditiis.', style: 'underline' }
]
// 基础渲染参数，和原有配置保持一致
const baseX = 20
const baseY = 20
const fontSize = 9
doc.setFontSize(fontSize)
let currentX = baseX

textSegments.forEach(segment => {
  if (segment.style === 'underline') {
    // 下划线样式兼容处理
    doc.setFontStyle('normal')
    doc.text(currentX, baseY, segment.text)
    const segWidth = doc.getTextWidth(segment.text)
    // 绘制下划线，位置在文本基线下1pt，线宽0.1，可根据需求微调
    doc.setLineWidth(0.1)
    doc.line(currentX, baseY + 1, currentX + segWidth, baseY + 1)
    currentX += segWidth
  } else {
    // 普通/加粗样式直接渲染
    doc.setFontStyle(segment.style)
    doc.text(currentX, baseY, segment.text)
    currentX += doc.getTextWidth(segment.text)
  }
})
// 导出PDF
doc.save('styled-text.pdf')

注意事项 #

• 如果使用自定义字体，必须提前导入对应字重的字体文件（比如加粗版本的字体），否则加粗样式无法正常显示
• 如果需要支持自动换行，逐段渲染时判断累加后的X坐标是否超出页面内容区宽度，超出则重置X为起始坐标、Y坐标累加一行的高度即可
• 下划线的位置、线宽可以根据实际显示效果调整，适配不同字号的显示需求

内容的提问来源于stack exchange，提问作者Josue Muñoz Avila