jsPDF库无法导出西里尔字母的React项目技术求助

问题核心 #

jsPDF默认不支持非ASCII字符（如西里尔字母），必须加载包含对应字符集的字体，且要保证字体加载、注册的流程完全正确。

方案一：修复import导入字体的路径问题 #

1. 确认项目资源配置：
   • Vite/Create React App默认支持字体文件导入，若为自定义Webpack配置，需确保asset/resource或file-loader能处理.ttf格式。
2. 正确导入字体URL：
   React中导入字体文件时，会返回编译后的资源URL，而非文件内容，需用此URL来加载字体：

   import RobotoRegularUrl from "../../../assets/fonts/Roboto-Regular.ttf";
   

方案二：修正fetch加载字体的处理逻辑 #

你之前的fetch流程中，二进制转字符串的方式可能丢失了字体数据，导致字符无法渲染。以下是正确的实现：

async function exportDataToPDF() {
  const doc = new jsPDF();
  // 使用上面import的URL，或直接用public目录下的绝对路径（推荐把字体放public/fonts下）
  const fontUrl = RobotoRegularUrl; // 或 '/fonts/Roboto-Regular.ttf'

  // 正确读取字体并转换为base64格式
  const fontData = await fetch(fontUrl).then(res => res.arrayBuffer());
  const fontBase64 = btoa(String.fromCharCode(...new Uint8Array(fontData)));

  // 注册字体到jsPDF的虚拟文件系统
  doc.addFileToVFS("Roboto-Regular.ttf", fontBase64);
  doc.addFont("Roboto-Regular.ttf", "Roboto", "normal");

  // 全局设置字体，确保后续文本使用该字体
  doc.setFont("Roboto");
  doc.setFontSize(16);

  doc.text('In english', 10, 10);
  doc.text('На български', 10, 20);

  doc.save('Планирано производство.pdf');
}

关键注意点 #

• 字体完整性：确保使用的Roboto字体包含西里尔字符集，建议从官方渠道下载完整版Roboto Regular（避免精简版缺失字符）。
• 路径可靠性：字体放在src/assets下时，用import获取URL更稳妥；放在public目录下可直接用绝对路径，避免编译后的路径变化问题。
• jsPDF版本：使用最新版jsPDF，旧版本可能存在字体注册的兼容性bug。

内容的提问来源于stack exchange，提问作者Kristiyan