如何在ReactJS Web应用中稳定可靠渲染PDF、Doc/Docx文件？

我之前在项目里也踩过第三方文档查看器不稳定、开源库卡加载的坑，结合实际使用经验，给你推荐几个经过验证的方案，覆盖PDF、Docx及Doc格式的渲染需求：

一、PDF渲染：react-pdf #

这是目前React生态里最稳定的PDF渲染库，完全本地化渲染，不依赖任何外部服务，避免了网络波动导致的加载失败问题。

• 核心优势：支持分页、缩放、文本搜索、打印等常用功能，社区活跃，维护及时，文档齐全。
• 基本用法：
  1. 安装依赖：

     npm install @react-pdf/renderer @react-pdf/viewer
     

  2. 组件示例：

     import { Viewer } from '@react-pdf/viewer';
     import '@react-pdf/viewer/lib/styles/index.css';
     
     function PDFViewer({ fileUrl }) {
       return (
         <div style={{ width: '100%', height: '80vh' }}>
           <Viewer fileUrl={fileUrl} />
         </div>
       );
     }
     

二、Docx渲染：mammoth.js + React #

对于Docx格式，纯前端渲染最可靠的方式是先转成HTML再渲染，mammoth.js是这个场景下的首选工具，能很好地保留原文档的格式（列表、表格、文本样式等）。

• 核心优势：纯前端处理，无需后端，转换速度快，格式还原度高，稳定性极强。
• 基本用法：
  1. 安装依赖：

     npm install mammoth
     

  2. 组件示例（以加载远程Docx文件为例）：

     import { useState, useEffect } from 'react';
     import mammoth from 'mammoth';
     
     function DocxViewer({ fileUrl }) {
       const [htmlContent, setHtmlContent] = useState('');
     
       useEffect(() => {
         const fetchAndConvertDocx = async () => {
           const response = await fetch(fileUrl);
           const arrayBuffer = await response.arrayBuffer();
           const result = await mammoth.convertToHtml({ arrayBuffer });
           setHtmlContent(result.value);
         };
         fetchAndConvertDocx();
       }, [fileUrl]);
     
       // 注意：如果是用户上传的文件，建议先做XSS过滤再渲染
       return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
     }
     

三、多格式综合渲染：react-doc-viewer #

如果你需要一站式支持PDF、Docx、Xlsx等多种格式，react-doc-viewer是个不错的选择——它内部封装了react-pdf、mammoth等成熟库，开箱即用，无需自己拼接逻辑。

• 核心优势：支持多种文档格式，提供统一的UI组件，配置简单，更新维护及时。
• 基本用法：
  1. 安装最新版本（避免旧版本的加载问题）：

     npm install react-doc-viewer
     

  2. 组件示例：

     import DocViewer from 'react-doc-viewer';
     
     function MultiFormatViewer({ documents }) {
       // documents格式：[{ uri: 'https://example.com/file.pdf', fileName: '文档1.pdf' }, ...]
       return <DocViewer documents={documents} />;
     }
     

四、旧版Doc格式（.doc）的处理 #

旧版的.doc格式无法通过纯前端可靠渲染，建议配合后端做格式转换：

• 后端使用libreoffice-convert或其他工具，将.doc文件转换为.docx或PDF格式，再传给前端用上面的方案渲染。
• 这种方式能保证兼容性和稳定性，避免前端处理旧格式的各种坑。

最后提醒一下：尽量避免依赖Google/Microsoft的在线查看器，它们的稳定性受网络和第三方服务状态影响很大，本地化渲染的库才是长期可靠的选择。

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