React PDF无法渲染特殊字符（如上标）问题求助

核心原因 #

自定义代码使用的默认字体对特殊字符（如上标、™商标符号）支持有限，而Playground内置了兼容字体，因此出现显示差异。

解决步骤 #

1. 注册支持完整Unicode的字体

react-pdf默认字体覆盖字符范围窄，需手动引入兼容字体：

• 准备Noto Sans、Roboto这类覆盖全Unicode的字体文件，放入项目public/fonts目录。
• 在代码入口注册字体：

  import { Font } from '@react-pdf/renderer';
  
  Font.register({
    family: 'Noto Sans',
    src: '/fonts/NotoSans-Regular.ttf',
    fontWeight: 'normal'
  });
  

• 在Text组件样式中指定该字体：

  const styles = StyleSheet.create({
    header: {
      fontFamily: 'Noto Sans',
      // 保留原有样式配置
    }
  });
  

2. 手动处理上标字符（可选）

若字体仍无法渲染部分上标，可通过嵌套Text组件自定义样式：

• 编写格式化工具函数自动转换数字/特殊上标：

  const formatChemicalName = (name) => {
    if (!name) return null;
    return name.split(/(\d+|™|®)/).map((part, idx) => {
      // 对数字和商标符号应用上标样式
      if (!isNaN(part) || ['™', '®'].includes(part)) {
        return (
          <Text key={idx} style={{ fontSize: '0.7em', baselineShift: 'super' }}>
            {part}
          </Text>
        );
      }
      return part;
    });
  };
  

• 调用函数渲染：

  <View style={styles.mainSecation}>
    <Text style={styles.header}>{formatChemicalName(chemicalData?.ChemicalName)}</Text>
  </View>
  

3. 解码HTML实体（若存在）

如果后端返回的是HTML实体（如™而非™），需先解码：

const decodeHtml = (str) => {
  const elem = document.createElement('textarea');
  elem.innerHTML = str;
  return elem.value;
};

// 使用示例
<Text style={styles.header}>{decodeHtml(chemicalData?.ChemicalName)}</Text>

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