jsPDF 中文显示解决方案：字体引入与配置指南

生成的文件内容大致是：

(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 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- 2. 引入你转换后的字体文件（推荐放 public 或 static 目录） -->
<script src="./fonts/SourceHanSansCN-normal.js"></script>
<script>
// 3. 生成 PDF
function generatePDF() {
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF();
  // 设置中文字体（必须在 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 分钟，就能彻底告别中文乱码。