jsPDF 中文显示解决方案:字体引入与配置指南
jsPDF 默认只支持 14 种标准 PDF 字体(Helvetica、Times 等),完全不支持中文字符,导致中文显示为方框或乱码。 核心解决办法:引入支持中文的自定义字体(TTF → 转换 → 加载)。
2025-2026 年最推荐、最稳定的方式是使用思源黑体 / 思源宋体 / Noto Sans CJK 等免费开源字体,并通过官方推荐的转换工具处理。
步骤 1:准备中文字体文件(.ttf)
选择体积适中、支持简体中文的字体(推荐以下任一):
- 思源黑体(Source Han Sans):现代感强,推荐
- 下载地址:https://github.com/adobe-fonts/source-han-sans(选择 OTC 或 TTF 版本,建议 SC 简体中文子集)
- 思源宋体(Source Han Serif):更正式的场景
- Noto Sans CJK SC:Google 出品,覆盖全面
- 更小的子集字体(推荐生产环境):使用工具裁剪只保留常用汉字,文件可从几 MB 降到几百 KB
小技巧:字体文件越小,PDF 生成越快、文件体积越小。优先找'简体中文子集'版本。
步骤 2:将 TTF 转换为 jsPDF 可用的 JS 格式
jsPDF 官方提供了字体转换工具(fontconverter),将 TTF 转为 base64 + 字体定义的 JS 文件。
操作方式(最简单两种,任选其一):
方式 A:在线转换(推荐新手)
- 打开 jsPDF 官方在线转换器(或 fork 版本):
- 拖入或选择你的 .ttf 文件(例如:SourceHanSansCN-Normal.ttf)
- 自动填充:
- Font name:自定义(如 'SourceHanSansCN')
- Font style:normal(或 bold/italic 根据实际情况)
- 点击 Convert → 下载生成的 JS 文件(例如:SourceHanSansCN-normal.js)
方式 B:本地转换(项目多字体时推荐)
- 打开
jsPDF/fontconverter/fontconverter.html(浏览器直接打开) - 同上操作,生成 JS 文件
克隆 jsPDF 仓库:
git clone https://github.com/parallax/jsPDF.git
:

