jsPDF 中文显示解决方案：字体引入与配置指南

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 出品，覆盖全面
  • https://fonts.google.com/noto/specimen/Noto+Sans+SC
• 更小的子集字体（推荐生产环境）：使用工具裁剪只保留常用汉字，文件可从几 MB 降到几百 KB

小技巧：字体文件越小，PDF 生成越快、文件体积越小。优先找'简体中文子集'版本。

步骤 2：将 TTF 转换为 jsPDF 可用的 JS 格式

jsPDF 官方提供了字体转换工具（fontconverter），将 TTF 转为 base64 + 字体定义的 JS 文件。

操作方式（最简单两种，任选其一）：

方式 A：在线转换（推荐新手）

1. 打开 jsPDF 官方在线转换器（或 fork 版本）：
   • https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html
   • 或 https://peckconsulting.s3.amazonaws.com/fontconverter/fontconverter.html
2. 拖入或选择你的 .ttf 文件（例如：SourceHanSansCN-Normal.ttf）
3. 自动填充：
   • Font name：自定义（如 'SourceHanSansCN'）
   • Font style：normal（或 bold/italic 根据实际情况）
4. 点击 Convert → 下载生成的 JS 文件（例如：SourceHanSansCN-normal.js）

方式 B：本地转换（项目多字体时推荐）

1. 打开 jsPDF/fontconverter/fontconverter.html（浏览器直接打开）
2. 同上操作，生成 JS 文件

克隆 jsPDF 仓库：

git clone https://github.com/parallax/jsPDF.git 

：