【亲测免费】 React Doc Viewer 安装和配置指南

2026-01-20 02:11:33作者：齐冠琰

1. 项目基础介绍

React Doc Viewer 是一个用于在 React 应用中查看文件的库。它支持多种文件格式，如 PDF、Word 文档、Excel 表格、图片等。该项目的主要编程语言是 JavaScript，并且它是基于 React 框架开发的。

2. 项目使用的关键技术和框架

React: 用于构建用户界面的 JavaScript 库。
TypeScript: 提供了静态类型检查的 JavaScript 超集。
Vite: 一个快速的构建工具，用于开发和构建现代 Web 应用。
Storybook: 用于开发和测试 UI 组件的工具。

3. 项目安装和配置的准备工作

在开始安装和配置之前，请确保你已经安装了以下工具和环境：

Node.js: 版本 14 或更高。
npm 或 yarn: 用于安装和管理依赖包。
Git: 用于克隆项目仓库。

4. 详细的安装步骤

4.1 克隆项目仓库

首先，使用 Git 克隆项目仓库到本地：

git clone https://github.com/cyntler/react-doc-viewer.git

4.2 进入项目目录

进入克隆下来的项目目录：

cd react-doc-viewer

4.3 安装依赖

使用 npm 或 yarn 安装项目所需的依赖包：

npm install

或者

yarn install

4.4 运行开发服务器

安装完成后，你可以启动开发服务器来查看和测试项目：

npm run dev

或者

yarn dev

4.5 构建项目

如果你想构建项目以用于生产环境，可以使用以下命令：

npm run build

或者

yarn build

4.6 配置项目

项目的基本配置可以在 vite.config.ts 文件中进行。你可以根据需要修改配置，例如端口号、代理设置等。

4.7 使用 React Doc Viewer

在你的 React 项目中使用 React Doc Viewer，首先需要安装它：

npm install @cyntler/react-doc-viewer

或者

yarn add @cyntler/react-doc-viewer

然后在你的 React 组件中导入并使用它：

import React from 'react';
import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer';

function App() {
  const docs = [
    { uri: "https://url-to-my-pdf.pdf" }, // 远程文件
    { uri: require("./example-files/pdf.pdf") }, // 本地文件
  ];

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

export default App;