求助：使用react-doc-viewer渲染本地文件失败，求排查

1. 修复JSX语法错误 #

你提供的渲染组件代码存在未闭合的语法问题，config对象和组件标签都没有正确闭合，这会直接导致组件无法编译渲染。修正后的代码示例：

<DocViewer 
  pluginRenderers={DocViewerRenderers} 
  documents={docs} 
  style={{width: 500, height: 500}} 
  config={{ 
    header: { 
      disableHeader: true 
    } 
  }} 
/>

2. 修正本地文件引用方式 #

你当前用http://localhost:8080/的URL引用文件，这种方式仅适用于文件已部署到静态服务的场景。针对本地项目内的文件，分两种情况处理：

• 文件在public目录下：使用根相对路径直接引用

  const docs = [
    { uri: "/124124_AN_1684893152034.xlsx", fileType: 'xlsx' }
  ];
  

• 文件在src目录下：先导入文件再引用

  import excelFile from './124124_AN_1684893152034.xlsx';
  const docs = [
    { uri: excelFile, fileType: 'xlsx' }
  ];
  

3. 确认渲染器正确导入 #

确保已正确导入DocViewerRenderers，不同版本的导入方式可能略有差异，标准导入示例：

import { DocViewer, DocViewerRenderers } from "react-doc-viewer";

4. 检查文件类型支持 #

确认react-doc-viewer的插件包含Excel文件渲染器，部分版本可能需要额外安装依赖（如xlsx库），可查看对应版本的官方文档确认依赖要求。

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