ReactPDF renderToFile无法渲染阿拉伯文本问题求助

阿拉伯文本显示为*BFJ) 'DE9DHE'*、1'4/ 'D9H6J这类乱码，核心原因是**@react-pdf/renderer默认字体不支持阿拉伯文等非拉丁字符**，必须手动引入并配置支持阿拉伯文的字体。

解决方案步骤： #

1. 引入支持阿拉伯文的字体
   下载支持阿拉伯文的字体（比如Google的Noto Sans Arabic），将字体文件（如NotoSansArabic-Regular.ttf）放到项目的public/fonts目录下（或其他可访问的静态资源目录）。

2. 在PDF组件中注册并使用字体
   修改你的TicketDownloadPDF组件，注册字体并指定使用：

   import { Font, Document, Page, Text, View } from '@react-pdf/renderer';
   
   // 注册阿拉伯文常规字体
   Font.register({
     family: 'Noto Sans Arabic',
     src: '/fonts/NotoSansArabic-Regular.ttf',
     fontWeight: 'normal',
   });
   
   // 如需粗体，额外注册对应字体文件
   Font.register({
     family: 'Noto Sans Arabic',
     src: '/fonts/NotoSansArabic-Bold.ttf',
     fontWeight: 'bold',
   });
   
   const TicketDownloadPDF = ({ ticket }) => {
     return (
       <Document>
         <Page 
           size="A4" 
           style={{ 
             fontFamily: 'Noto Sans Arabic',
             direction: 'rtl' // 阿拉伯文从右到左排版，需设置此属性
           }}
         >
           <View>
             {/* 渲染阿拉伯文本内容 */}
             <Text style={{ textAlign: 'right' }}>{ticket.arabicContent}</Text>
             {/* 粗体阿拉伯文本示例 */}
             <Text style={{ textAlign: 'right', fontWeight: 'bold' }}>{ticket.boldArabicContent}</Text>
           </View>
         </Page>
       </Document>
     );
   };
   
   export default TicketDownloadPDF;
   

3. 验证字体路径与访问权限
   确保字体文件路径正确，服务器运行时能正常读取该文件（比如Next.js中public目录下的资源可直接通过根路径访问）。

额外说明： #

• 手动引入字体文件比依赖npm字体包更可控，避免包内字体缺失或版本兼容问题。
• 阿拉伯文排版必须设置direction: 'rtl'和textAlign: 'right'，才能保证文本从右到左的正确排版逻辑。

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