如何解决jsPDF中fromHTML方法无法修改默认字体的问题？

我之前也踩过这个坑！jsPDF 的 fromHTML 方法确实有点“顽固”，它不会直接继承 setFont() 设置的字体——毕竟它是基于HTML内容解析渲染的，得换个思路从HTML样式或配置入手。这里有几个亲测有效的解决方法：

1. 直接给HTML元素指定字体样式 #

既然 fromHTML 是解析HTML内容，那最直接的方式就是给要导出的内容加内联样式或CSS类，明确指定字体族：

<!-- 内联样式示例 -->
<div style="font-family: 'Arial', sans-serif;">
  这段内容导出后会用Arial字体，且保持可复制性
</div>

<!-- CSS类示例 -->
<style>
  .pdf-content {
    font-family: 'Courier New', monospace;
  }
</style>
<div class="pdf-content">
  等宽字体的可复制内容
</div>

⚠️ 注意：jsPDF仅支持内置字体（Arial、Times Roman、Courier等）或你预先加载的自定义字体，不要用系统未安装/未加载的字体。

2. 加载自定义字体并通过CSS引用 #

如果要用非内置字体，第一步得用 addFont() 把字体文件加载到jsPDF中，再在HTML样式里引用：

// 加载自定义TTF字体（确保文件路径正确）
doc.addFont('assets/MyCustomFont.ttf', 'MyCustomFont', 'normal');

// 构造带样式的HTML内容
const htmlContent = `
  <style>
    .custom-font { font-family: 'MyCustomFont'; }
  </style>
  <div class="custom-font">用自定义字体渲染的可复制内容</div>
`;

// 调用fromHTML导出
doc.fromHTML(htmlContent, 15, 15);

3. 利用fromHTML的回调手动设置字体 #

fromHTML 提供了回调函数，可以在渲染每个文本节点时手动覆盖字体设置，适合需要统一修改所有文本字体的场景：

doc.fromHTML(htmlContent, 10, 10, {
  // 处理每个文本块的回调
  didParseText: function(text, x, y, options) {
    // 保存原字体，避免影响后续内容
    const originalFont = doc.getFont();
    // 设置目标字体
    doc.setFont('MyCustomFont', 'normal');
    // 手动绘制文本
    doc.text(text, x, y);
    // 恢复原字体
    doc.setFont(originalFont.family, originalFont.style);
    // 返回false阻止默认渲染，避免重复绘制
    return false;
  }
});

4. 升级到最新版jsPDF，用html()替代fromHTML #

划重点：fromHTML 已经被标记为过时方法了！新版jsPDF推荐使用 html() 方法，它对字体的支持更友好，还能直接继承 setFont() 的设置：

const doc = new jsPDF();
// 设置默认字体
doc.setFont('MyCustomFont', 'normal');

// 导出指定DOM元素
doc.html(document.getElementById('export-content'), {
  callback: function(pdfDoc) {
    pdfDoc.save('custom-font.pdf');
  }
});

这个方法不仅解决了字体问题，还能处理更复杂的HTML布局，建议优先升级使用。

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