3步搞定jsPDF中文显示：从乱码到完美输出的完整指南
3步搞定 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：在线转换（推荐新手）
- 打开 jsPDF 官方在线转换器（或 fork 版本）：
- https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html
- 或 https://peckconsulting.s3.amazonaws.com/fontconverter/fontconverter.html
- 拖入或选择你的 .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 生成的文件内容大致是：
(function(jsPDFAPI){var font ='AAEAAA...';// base64 编码的字体数据（很长） jsPDFAPI.addFileToVFS('SourceHanSansCN-Normal.ttf', font); jsPDFAPI.addFont('SourceHanSansCN-Normal.ttf','SourceHanSansCN','normal');})(jsPDF.API);步骤 3：在代码中引入并使用中文字体
完整示例代码（Vue/React/纯 JS 通用）
<!-- 1. 引入 jsPDF --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script><!-- 2. 引入你转换后的字体文件（推荐放 public 或 static 目录） --><scriptsrc="./fonts/SourceHanSansCN-normal.js"></script><script>// 3. 生成 PDFfunctiongeneratePDF(){const{ jsPDF }= window.jspdf;const doc =newjsPDF();// 设置中文字体（必须在 text 之前调用） doc.setFont('SourceHanSansCN','normal');// 字体名要和 addFont 时一致// 可选：设置字体大小 doc.setFontSize(16);// 输出中文（现在不会乱码了） doc.text('你好，世界！这是一个支持中文的 jsPDF 示例。',20,30);// 支持混合中英文 doc.text('Hello, 这是一段中英混合文本，完美显示～',20,50);// 如果有粗体需求（需单独转换 bold 版本）// doc.setFont('SourceHanSansCN', 'bold'); doc.save('中文PDF示例.pdf');}// 调用// generatePDF();</script>常见问题 & 解决方案速查表
| 问题 | 原因 | 解决办法 |
|---|---|---|
| 仍然方框/乱码 | 没调用 setFont | 必须在 text 前 doc.setFont(‘你的字体名’) |
| 字体名找不到（warning） | addFont 的名称不匹配 | 确认 addFont 的第2个参数（字体家族名） |
| PDF 文件超大 | 完整 TTF 文件太大 | 使用字体子集工具裁剪（只保留常用汉字） |
| 转换后文件报错 | jsPDF 版本不兼容 | 建议用 2.5.x 版本 + 对应转换工具 |
| 多人协作 / CDN 加载 | 字体 JS 文件太大 | 上传到 OSS/CDN，动态 import 或 xhr 加载 |
| AutoTable 中文也乱码 | AutoTable 需要单独设置字体 | table.styles.font = ‘你的字体名’ |
推荐字体组合（生产级）
- 正常文本：SourceHanSansCN-Normal
- 粗体：SourceHanSansCN-Bold（需单独转换）
- 标题：SourceHanSerifCN-Bold（宋体风格）
一句话总结：
下载 TTF → 用 fontconverter 转成 JS → 引入 + setFont → 中文完美显示
整个过程最长不超过 10 分钟，就能彻底告别中文乱码。
需要我提供某个具体字体的转换后代码片段？
或者想看结合 html2canvas + jsPDF 导出页面的完整中文版示例？
直接告诉我～
