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 SCGoogle 出品覆盖全面https://fonts.google.com/noto/specimen/NotoSansSC更小的子集字体推荐生产环境使用工具裁剪只保留常用汉字文件可从几 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 stylenormal或 bold/italic 根据实际情况点击 Convert → 下载生成的 JS 文件例如SourceHanSansCN-normal.js方式 B本地转换项目多字体时推荐克隆 jsPDF 仓库gitclone https://github.com/parallax/jsPDF.git打开jsPDF/fontconverter/fontconverter.html浏览器直接打开同上操作生成 JS 文件生成的文件内容大致是(function(jsPDFAPI){varfontAAEAAA...;// base64 编码的字体数据很长jsPDFAPI.addFileToVFS(SourceHanSansCN-Normal.ttf,font);jsPDFAPI.addFont(SourceHanSansCN-Normal.ttf,SourceHanSansCN,normal);})(jsPDF.API);步骤 3在代码中引入并使用中文字体完整示例代码Vue/React/纯 JS 通用!-- 1. 引入 jsPDF --scriptsrchttps://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js/script!-- 2. 引入你转换后的字体文件推荐放 public 或 static 目录 --scriptsrc./fonts/SourceHanSansCN-normal.js/scriptscript// 3. 生成 PDFfunctiongeneratePDF(){const{jsPDF}window.jspdf;constdocnewjsPDF();// 设置中文字体必须在 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(‘你的字体名’)字体名找不到warningaddFont 的名称不匹配确认 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 导出页面的完整中文版示例直接告诉我
)
)
