jsPDF中文显示速通指南:4步搞定中文字体注册与自动换行 📅 发布时间:2026/8/24 11:08:59 👁 浏览次数: jsPDF中文显示速通指南4步搞定中文字体注册与自动换行【免费下载链接】jsPDFClient-side JavaScript PDF generation for everyone.项目地址: https://gitcode.com/gh_mirrors/js/jsPDF控制台没有任何报错下载下来的 PDF 却是一排排方框——这是 jsPDF中文显示 最常见的翻车现场。下面按“转字体 → 注册字体 → 排版换行 → 压缩产物”的动线把中文字体完整接进文档。jsPDF 默认只内置 Helvetica、Times-Roman 等 14 款 PDF 标准字体字符集止步于 ASCII。中文码点在这些字体里没有字形写入后只能渲染成方框这就是乱码的根因。解法只有一个方向注册一款自带中文字形的 TTF 字体。第一步 拿到字体用 fontconverter 转出注册脚本打开仓库自带的转换器 fontconverter/fontconverter.html填写字体名如simhei与样式normal / bold选中本地 .ttf 文件点 Create浏览器会下载一个 .js 文件TTF 被编码成 base64 字符串并附带注册代码把生成的 .js 引入项目jsPDF 初始化后字体即自动生效不想走转换器的话也可以用fetch把 .ttf 读成二进制字符串手动走下面三步。第二步 注册字体addFileToVFS → addFont → setFont// 字体写入虚拟文件系统注册为 simhei 并切换过去doc.addFileToVFS(simhei.ttf, base64Data); doc.addFont(simhei.ttf, simhei, normal); doc.setFont(simhei);addFont的第一个参数要和addFileToVFS的文件名一致setFont传的是字体名第二个参数别传成文件名。第三步 排版maxWidth 一行解决自动换行// 指定最大宽度自动折行行高系数放大到 1.4doc.setFontSize(14); doc.text(你好这是一段中文排版示例超宽时自动折行。, 10, 30, { maxWidth: 180, lineHeightFactor: 1.4 });不传maxWidth或传 0时不会折行默认行高系数是 1.15中文场景建议 1.3~1.5长文本先过一遍 splitTextToSize// 按宽度切分成多行再整体写入const lines doc.splitTextToSize(longText, 180); doc.text(lines, 10, 50);跨页场景下用返回的行数检查 y 坐标避免文字被切到下一页之外。第四步 压缩产物把文件体积压下去// 生成时开启压缩const doc new jsPDF({ unit: mm, format: a4, compression: true });字体是体积大头。全文档只用到几十个汉字时先用字体子集工具裁掉未用字符再配合compression效果最明显。 避坑速查表现象原因一句话处理中文渲染成方框标准字体无中文字形注册中文 TTF 并 setFont 切换已注册仍乱码TTF 本身缺中文字形换支持中文的字体思源黑体等行距挤成一团行高系数默认 1.15 偏小text 里传lineHeightFactor: 1.4文字溢到下一页未做换页判断splitTextToSize 拿到行数后检查 y文件几十 MB整字库全量嵌入字体子集化 compression: trueaddFont 报错文件名两处不一致addFileToVFS 与 addFont 用同一文件名 延伸阅读text全部选项与addFont签名见 README.md非拉丁字体接法可参考 examples/japanese.js 与 examples/russian.js完整 API 文档在 docs/ 目录。【免费下载链接】jsPDFClient-side JavaScript PDF generation for everyone.项目地址: https://gitcode.com/gh_mirrors/js/jsPDF创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考