React 文件预览：装好 react-doc-viewer，喂给它第一个文件
【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewer
想在 React 应用里做文档预览，又不想为每种格式各接一套渲染方案？react-doc-viewer（npm 包名@cyntler/react-doc-viewer）是一个面向 React 17+ 的文件查看组件：一个DocViewer标签就能收掉 PDF、Office 文档、常见图片、CSV、纯文本、HTML 和 MP4 视频，远程地址、本地文件和用户上传的 Blob 都能直接显示。
装好它
npm i @cyntler/react-doc-viewer一行装完。但它有个容易漏的依赖：必须把自带的样式文件@cyntler/react-doc-viewer/dist/index.css引进来，否则 PDF 的页面布局会塌掉——这步别跳过。
喂给它一个文件
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer"; import "@cyntler/react-doc-viewer/dist/index.css"; const App = () => ( <DocViewer documents={[{ uri: "https://example.com/a.pdf" }]} pluginRenderers={DocViewerRenderers} /> );documents是文档对象数组，uri可以是网络地址，也可以是打包进项目的本地文件。用户上传的文件走 Blob：用window.URL.createObjectURL(file)转成对象 URL 当 uri，把file.name填进fileName，组件就认了。默认显示数组第一项，想换就传initialActiveDocument；要从外部接管当前文档，用activeDocument配onDocumentChange，1.13.0 之后还能通过DocViewerRef调 prev/next 翻文档。注意组件默认高度随内容伸缩、宽度撑满父容器，外层要给它一个约束尺寸。
支持哪些格式，Office 的坑在哪
| 类别 | 格式 | 渲染方式 |
|---|---|---|
| 文档 | 基于 react-pdf，带缩放、翻页、多页视图 | |
| 图片 | PNG / JPG / GIF / WebP / BMP / TIFF | TIFF 走前端 canvas 解析 |
| Office | doc / docx / xls / xlsx / ppt / pptx / odt | iframe 内嵌 Office 在线查看服务 |
| 其它 | CSV / TXT / HTML / MP4 | CSV 经 papaparse 解析成表格，HTML 写进沙箱 iframe |
渲染器怎么选：每个渲染器声明自己的fileTypes和weight，组件按文件类型匹配后取权重最高的那个，内置清单在src/renderers/index.ts。
Office 文件说白了不是本地渲染的——组件把文件 URL 交给 Microsoft 的在线查看服务在 iframe 里显示，所以 URL 必须公开可访问。私有、需鉴权的 Office 文件这条路走不通，目前浏览器端也确实没有原生的 Office 渲染方案。
换个皮肤，换个语言
- 主题：
theme传个对象，primary、secondary和textPrimary这类色值就能改，默认值定义在src/defaultTheme.ts； - 语言：传
language="pl"之类的 prop 即可，翻译文件共 14 份，放在src/locales； - 配置：
config里能关顶部栏、设 CSV 分隔符、调 PDF 默认缩放和步进； - 请求：预取默认发 HEAD 猜 Content-Type，只允许单一 verb 的服务改成
prefetchMethod="GET"；私有资源用requestHeaders挂鉴权头。
想自己加一种格式也简单：写个组件，声明fileTypes、weight（可选fileLoader），塞进pluginRenderers就行，匹配逻辑在src/hooks/useRendererSelector.ts。顶部栏、加载占位、报错占位都能在config里传函数整体替换。
什么时候别用它，以及下一步
三种情况先劝退：Office 文件不公开、不能走在线服务；要求 Word/Excel/PPT 纯本地渲染；你需要的是持续新增格式的维护承诺——作者在 README 里已声明停止更新这个项目，后续演进看社区。
下一步动作：clone 仓库 https://gitcode.com/gh_mirrors/re/react-doc-viewer ，跑npm run start进 Storybook 把各渲染器挨个试一遍，再对照src/renderers/目录确认每种格式的渲染细节是否符合你的场景。
【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewer
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
