Replit中React项目使用react-doc-viewer无法显示问题求助

你的代码主要存在几个问题，导致文档查看器无法显示，以下是对应的解决方法：

1. 错误引用public目录下的静态资源 #

React项目中，public目录下的文件属于静态资源，不需要通过require()导入，直接使用以/开头的根相对路径即可。require()会返回模块对象而非正确的资源URL，导致DocViewer无法定位到PDF文件。

修改后的代码：

import DocViewer from "react-doc-viewer";

function App() {
  const docs = [
    { uri: "/entertainer-let.pdf" },
    { uri: "/maple-a4.pdf" },
  ];

  return <DocViewer documents={docs} />;
}

export default App;

2. 未设置容器高度 #

DocViewer组件默认没有固定高度，若父容器高度为0，组件会因不可见而无法显示。需要给组件或其父容器设置明确的高度：

import DocViewer from "react-doc-viewer";

function App() {
  const docs = [
    { uri: "/entertainer-let.pdf" },
    { uri: "/maple-a4.pdf" },
  ];

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <DocViewer documents={docs} />
    </div>
  );
}

export default App;

3. 新版本插件依赖问题 #

如果使用的是react-doc-viewer的较新版本（v3及以上），默认不再内置PDF查看插件，需要单独安装并配置：

首先安装PDF插件：

npm install @react-doc-viewer/pdf

然后修改代码配置插件：

import DocViewer from "react-doc-viewer";
import { PDFViewer } from "@react-doc-viewer/pdf";

function App() {
  const docs = [
    { uri: "/entertainer-let.pdf" },
    { uri: "/maple-a4.pdf" },
  ];

  const plugins = [
    {
      plugin: PDFViewer,
    },
  ];

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <DocViewer documents={docs} plugins={plugins} />
    </div>
  );
}

export default App;

按以上步骤调整后，文档查看器应该能正常显示PDF内容。

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