@react-pdf/renderer渲染文本：换行失效与上标不解析问题求助

一、换行失效的原因与解决 #

你代码里的replace(/\s+/g, ' ')正则会把**所有空白字符（包括\r\n换行符、空格、制表符）**替换成单个空格，原文本里的换行被完全覆盖，自然无法在PDF中换行。

解决步骤：

1. 先按\r\n把原文本分割成每行数组，过滤掉空行和末尾的*；
2. 对每行单独处理行内的多余空格，保留换行结构；
3. 用<Text break />实现每行的强制换行。

修改后的代码片段：

<Text style={{ padding: 2, fontSize: 10, paddingTop: 10, wordWrap: 'break-word' }}>
  { 
    el.Notes.split('\r\n')
      .filter(line => line.trim() && line !== '*')
      .map((line, idx) => (
        <React.Fragment key={idx}>
          {line.replace(/Goods of [a-zA-Z]+ [a-zA-Z]+/, '')
               .replace('with calibration certificate', '')
               .replace(/KG\/CM2/g, 'Kg/cm²')
               .replace(/\s+/g, ' ')} {/* 仅处理行内多余空格 */}
          <Text break />
        </React.Fragment>
      ))
  }
</Text>

二、上标不渲染的原因与解决 #

@react-pdf/renderer 不支持HTML实体（比如²），这类字符会被直接当作纯文本输出，无法解析为上标。提供两种可行方案：

方案1：使用Unicode上标字符 #

直接用Unicode字符²（编码对应\u00B2）替换，替换规则改为：

.replace(/KG\/CM2/g, 'Kg/cm²')

方案2：嵌套Text组件实现自定义上标 #

如果需要调整上标的字体大小或样式，可通过嵌套Text组件设置样式：

.replace(/KG\/CM2/g, () => (
  <>
    Kg/cm
    <Text style={{ verticalAlign: 'super', fontSize: '0.7em' }}>2</Text>
  </>
))

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