企业官网建设流程全解析

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：在线转换（推荐新手）

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 仓库：

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

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

生成的文件内容大致是：

(function(jsPDFAPI){varfont='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;constdoc=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>

常见问题 & 解决方案速查表

推荐字体组合（生产级）

• 正常文本：SourceHanSansCN-Normal
• 粗体：SourceHanSansCN-Bold（需单独转换）
• 标题：SourceHanSerifCN-Bold（宋体风格）

一句话总结：
下载 TTF → 用 fontconverter 转成 JS → 引入 + setFont → 中文完美显示
整个过程最长不超过 10 分钟，就能彻底告别中文乱码。

需要我提供某个具体字体的转换后代码片段？
或者想看结合 html2canvas + jsPDF 导出页面的完整中文版示例？
直接告诉我～