使用@progress/kendo-react-pdf导出PDF时中文显示方块问题求助

已按文档配置TrueType字体但仍显示方块，可从以下几个方面排查修复：

1. 确认字体文件加载正常 #

• 将TTF字体文件（比如SimSun.ttf）放在项目public目录下（例如public/fonts/子文件夹）
• 打开浏览器开发者工具→Network标签，刷新页面后搜索字体文件名，确认无404错误，状态码为200
• 若路径错误，调整@font-face里的src路径

2. 修正@font-face定义细节 #

必须指定覆盖中文字符的unicode-range，同时确保导出容器应用该字体：

@font-face {
  font-family: 'SimSun';
  /* 路径与public下的文件位置对应 */
  src: url('/fonts/SimSun.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  /* 关键：覆盖所有常用中文字符范围 */
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+F900-FAFF, U+2F800-2FA1F;
}

/* 给PDF导出容器单独应用字体，避免影响全局样式 */
.pdf-export-wrap {
  font-family: 'SimSun', sans-serif !important;
}

3. 确保导出前字体已加载完成 #

字体未加载完成就触发导出会导致嵌入失败，可通过FontFace API监听加载状态：

import { useState, useEffect, useRef } from 'react';
import { PDFExport } from '@progress/kendo-react-pdf';

export default function PDFExportDemo() {
  const pdfRef = useRef(null);
  const [fontReady, setFontReady] = useState(false);

  useEffect(() => {
    // 手动加载字体并监听状态
    const simSunFont = new FontFace('SimSun', 'url(/fonts/SimSun.ttf)');
    simSunFont.load().then(loadedFont => {
      document.fonts.add(loadedFont);
      setFontReady(true);
    });
  }, []);

  const handleExport = () => {
    pdfRef.current?.save('中文测试.pdf');
  };

  return (
    <div>
      <button onClick={handleExport} disabled={!fontReady}>
        {fontReady ? '导出PDF' : '字体加载中...'}
      </button>
      {fontReady && (
        <PDFExport ref={pdfRef} paperSize="A4">
          <div className="pdf-export-wrap">
            这是测试中文内容：欢迎使用Kendo React PDF导出组件
          </div>
        </PDFExport>
      )}
    </div>
  );
}

4. 检查字体嵌入情况 #

导出PDF后，用PDF阅读器（如Adobe Acrobat）查看「文件→属性→字体」，确认配置的字体（如SimSun）显示为「已嵌入」或「已子集化嵌入」：

• 若显示「未嵌入」，说明字体未被正确识别，更换为完整的中文字体文件（比如思源黑体、微软雅黑的TTF版本）重试
• 避免使用裁剪过的子集字体，这类字体可能缺少部分中文字符

5. 强制PDFExport使用指定字体 #

若以上步骤无效，可尝试在PDFExport组件的exportProps里显式配置字体：

<PDFExport 
  ref={pdfRef} 
  paperSize="A4"
  exportProps={{
    fonts: [
      {
        family: 'SimSun',
        src: 'url(/fonts/SimSun.ttf)'
      }
    ]
  }}
>
  {/* 导出内容 */}
</PDFExport>

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