使用@react-pdf/renderer生成波斯语PDF时文本显示异常求助

云上老周

2026-8-20

@react-pdf/renderer波斯语文本PDF显示异常解决方案

网页端波斯语文本显示正常，但生成PDF后出现无效文本：
网页端显示效果
PDF下载后显示效果

用户代码如下：

import font from "./IRANsans.ttf";

Font.register({
  family: "IRANSans",
  format: "truetype",
  src: font,
});

const styles = StyleSheet.create({
  page: {
    fontFamily: "IRANSans",
  },
});

<Document style={{ backgroundColor: "white", padding: "10px" }}>
  <Page size="A4" style={styles.page}>
    <View>
      <Text>متن نوشته شده به فارسی</Text>
    </View>
  </Page>
</Document>

解决方案建议：

使用支持波斯语排版的完整字体：确保你的IRANSans字体包含OpenType布局（OTL）特性，部分精简版TTF可能缺失RTL文本渲染所需的字形信息，建议更换为官方完整版OTF/TTF字体。

注册字体时指定Unicode范围：明确限定波斯语字符范围，避免字体加载异常：

Font.register({
  family: "IRANSans",
  format: "truetype",
  src: font,
  unicodeRange: "U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF",
});

显式设置RTL文本属性：波斯语是从右到左语言，需在样式中指定方向和对齐方式：

const styles = StyleSheet.create({
  page: {
    fontFamily: "IRANSans",
    direction: "rtl",
  },
  persianText: {
    textAlign: "right",
    fontFamily: "IRANSans",
  },
});

// 组件中使用
<Text style={styles.persianText}>متن نوشته شده به فارسی</Text>

检查字体加载路径：若使用CRA环境，可将字体放入public目录，改用绝对路径注册，避免打包时路径错误：
```
Font.register({
  family: "IRANSans",
  format: "truetype",
  src: "/IRANSans.ttf",
});
```
升级依赖版本：旧版@react-pdf/renderer存在RTL渲染bug，升级到最新稳定版（如^3.1.14及以上）可修复部分问题。