如何三步解决 jsPDF 中文乱码中文字体加载完整指南【免费下载链接】jsPDFClient-side JavaScript PDF generation for everyone.项目地址: https://gitcode.com/gh_mirrors/js/jsPDF第一次用 jsPDF 的 doc.text() 输出中文得到的却是一排黑色方块。这种中文乱码源于内置字体缺少中文字体字形3 步加载中文字体即可解决。乱码的根源jsPDF 是客户端 PDF 生成库为了把体积压到最小默认只内置了几款西文字体helvetica、times、courier 等。这些字体的字符表里只有拉丁字母、数字和少量符号。你每调用一次 doc.text()jsPDF 都会拿当前字体去查字形glyph。当前字体是 helvetica 时中这个字符根本查不到对应的字形渲染结果就只能是空白或方框。 换句话说中文乱码不是编码 bug而是你手里没有一本包含中文的字库字典。解决方向一句话就能说清——找一个含中文的 TTF 字体文件交给 jsPDF 用。字体是怎么被 jsPDF 装进去的可以把 TTF 字体文件理解成 PDF 查字用的字库字典而 jsPDF 内置了一个临时文件柜叫VFSVirtual File System虚拟文件系统。你要做的就两件事先把字体文件放进柜子再登记注册。核心链路源码见 src/modules/ttfsupport.jsdoc.addFileToVFS(ChineseFont.ttf, base64FontData); // 字体存进 VFS doc.addFont(ChineseFont.ttf, ChineseFont, normal); // 解析 TTF 并注册addFont内部干了两件事从 VFS 读出 TTF 字节流再用内置解析器拆出编码表、字符宽度等元数据。之后 PDF 渲染每个中文字时就能按码位查到该用哪个字形了。注意三个参数的分工第一个参数是 VFS 里的文件名第二个是你之后调用的fontName第三个是样式normal、bold、italic。仓库里有两个真实参照examples/js/japanese.js 和 examples/js/arabic.js都是载入 TTF → setFont → text的老三样。三步落地选字体找一个开源的中文 TTF 字体尽量选轻量的比如思源黑体、文泉驿。原因很直接字体最终会原样嵌入 PDF字体多大PDF 就跟着涨多少。注册字体把 TTF 读成 base64 字符串存入 VFS 后登记注册doc.addFileToVFS(SourceHanSansSC.ttf, base64Font); doc.addFont(SourceHanSansSC.ttf, SourceHanSC, normal);⚠️ 易错点addFont第一个参数是 VFS 里的钥匙文件名不是你要用的字体名两者要一一对应别混着填。输出文本切换到已注册的字体然后正常排版导出doc.setFont(SourceHanSC, normal); doc.setFontSize(14); doc.text(你好jsPDF中文正常显示, 20, 20); doc.save(chinese-demo.pdf);打开导出的 PDF中文已经整整齐齐了。如果还没跑通过 PDF 的基本流程先看 examples/basic.html 补上基础操作。进阶玩法中英混排与字号样式切换同一份文档不只能用一种字体按段落切换就行doc.setFont(helvetica, normal); doc.text(Hello, jsPDF!, 20, 40); doc.setFont(SourceHanSC, normal); doc.text(接下来用中文继续, 20, 55);加粗靠多次调用addFont注册不同样式fontName 保持同一个样式参数区分开doc.addFont(SourceHanSansSC-Bold.ttf, SourceHanSC, bold); doc.setFont(SourceHanSC, bold); doc.text(加粗的中文标题, 20, 70);字号则是在输出前随时调setFontSize不同段落可以各用各的参考 examples/js/font-size.js。中文字体就位后图片一样可以混排下面的示例图就是典型的中文文档 插图组合排障清单当报 Font is not stored as string-data in vFS 时字体没进 VFS或addFileToVFS的键名与addFont的第一个参数不一致逐字核对两边。当路径看着对却读不到文件时确认路径相对页面 base 的拼接结果以及文件名里是否带空格、中文等特殊字符。当整段正常、个别字还是方框时说明这份字体缺了那个字符的字形不是 jsPDF 的问题。用 fontconverter/fontconverter.html 工具核对字体覆盖的字符范围或换一份覆盖更全的字体。当 PDF 太大时三个办法——换精简字体对字体做子集化只保留文档用到的字符初始化时传putOnlyUsedFonts: true让 jsPDF 只输出实际用到的字形部分。收尾字体名统一规划VFS 文件名与 fontName 分开命名避免后期维护时互相干扰。中文 TTF 上线前做子集化把体积控制交给构建流程而不是手动。英文继续用内置字体混排既省体积观感也更自然。等这套文件柜 字库字典的思路跑通日文、阿拉伯文、西里尔字母也只是同样三步的重复而已。相关资源官方文档docs/index.html基础示例examples/basic.html字体加载源码src/modules/ttfsupport.js字号控制示例examples/js/font-size.js字体转换工具fontconverter/fontconverter.html【免费下载链接】jsPDFClient-side JavaScript PDF generation for everyone.项目地址: https://gitcode.com/gh_mirrors/js/jsPDF创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/28 18:55:26 · 阅读 1.2k 如何三步解决 jsPDF 中文乱码：中文字体加载完整指南
如何三步解决 jsPDF 中文乱码中文字体加载完整指南【免费下载链接】jsPDFClient-side JavaScript PDF generation for everyone.项目地址: https://gitcode.com/gh_mirrors/js/jsPDF第一次用 jsPDF 的 doc.text() 输出中文得到的却是一排黑色方块。这种中文乱码源于内置字体缺少中文字体字形3 步加载中文字体即可解决。乱码的根源jsPDF 是客户端 PDF 生成库为了把体积压到最小默认只内置了几款西文字体helvetica、times、courier 等。这些字体的字符表里只有拉丁字母、数字和少量符号。你每调用一次 doc.text()jsPDF 都会拿当前字体去查字形glyph。当前字体是 helvetica 时中这个字符根本查不到对应的字形渲染结果就只能是空白或方框。 换句话说中文乱码不是编码 bug而是你手里没有一本包含中文的字库字典。解决方向一句话就能说清——找一个含中文的 TTF 字体文件交给 jsPDF 用。字体是怎么被 jsPDF 装进去的可以把 TTF 字体文件理解成 PDF 查字用的字库字典而 jsPDF 内置了一个临时文件柜叫VFSVirtual File System虚拟文件系统。你要做的就两件事先把字体文件放进柜子再登记注册。核心链路源码见 src/modules/ttfsupport.jsdoc.addFileToVFS(ChineseFont.ttf, base64FontData); // 字体存进 VFS doc.addFont(ChineseFont.ttf, ChineseFont, normal); // 解析 TTF 并注册addFont内部干了两件事从 VFS 读出 TTF 字节流再用内置解析器拆出编码表、字符宽度等元数据。之后 PDF 渲染每个中文字时就能按码位查到该用哪个字形了。注意三个参数的分工第一个参数是 VFS 里的文件名第二个是你之后调用的fontName第三个是样式normal、bold、italic。仓库里有两个真实参照examples/js/japanese.js 和 examples/js/arabic.js都是载入 TTF → setFont → text的老三样。三步落地选字体找一个开源的中文 TTF 字体尽量选轻量的比如思源黑体、文泉驿。原因很直接字体最终会原样嵌入 PDF字体多大PDF 就跟着涨多少。注册字体把 TTF 读成 base64 字符串存入 VFS 后登记注册doc.addFileToVFS(SourceHanSansSC.ttf, base64Font); doc.addFont(SourceHanSansSC.ttf, SourceHanSC, normal);⚠️ 易错点addFont第一个参数是 VFS 里的钥匙文件名不是你要用的字体名两者要一一对应别混着填。输出文本切换到已注册的字体然后正常排版导出doc.setFont(SourceHanSC, normal); doc.setFontSize(14); doc.text(你好jsPDF中文正常显示, 20, 20); doc.save(chinese-demo.pdf);打开导出的 PDF中文已经整整齐齐了。如果还没跑通过 PDF 的基本流程先看 examples/basic.html 补上基础操作。进阶玩法中英混排与字号样式切换同一份文档不只能用一种字体按段落切换就行doc.setFont(helvetica, normal); doc.text(Hello, jsPDF!, 20, 40); doc.setFont(SourceHanSC, normal); doc.text(接下来用中文继续, 20, 55);加粗靠多次调用addFont注册不同样式fontName 保持同一个样式参数区分开doc.addFont(SourceHanSansSC-Bold.ttf, SourceHanSC, bold); doc.setFont(SourceHanSC, bold); doc.text(加粗的中文标题, 20, 70);字号则是在输出前随时调setFontSize不同段落可以各用各的参考 examples/js/font-size.js。中文字体就位后图片一样可以混排下面的示例图就是典型的中文文档 插图组合排障清单当报 Font is not stored as string-data in vFS 时字体没进 VFS或addFileToVFS的键名与addFont的第一个参数不一致逐字核对两边。当路径看着对却读不到文件时确认路径相对页面 base 的拼接结果以及文件名里是否带空格、中文等特殊字符。当整段正常、个别字还是方框时说明这份字体缺了那个字符的字形不是 jsPDF 的问题。用 fontconverter/fontconverter.html 工具核对字体覆盖的字符范围或换一份覆盖更全的字体。当 PDF 太大时三个办法——换精简字体对字体做子集化只保留文档用到的字符初始化时传putOnlyUsedFonts: true让 jsPDF 只输出实际用到的字形部分。收尾字体名统一规划VFS 文件名与 fontName 分开命名避免后期维护时互相干扰。中文 TTF 上线前做子集化把体积控制交给构建流程而不是手动。英文继续用内置字体混排既省体积观感也更自然。等这套文件柜 字库字典的思路跑通日文、阿拉伯文、西里尔字母也只是同样三步的重复而已。相关资源官方文档docs/index.html基础示例examples/basic.html字体加载源码src/modules/ttfsupport.js字号控制示例examples/js/font-size.js字体转换工具fontconverter/fontconverter.html【免费下载链接】jsPDFClient-side JavaScript PDF generation for everyone.项目地址: https://gitcode.com/gh_mirrors/js/jsPDF创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考