用 react-doc-viewer 实现 React 文件预览20 种格式 3 步接入完整指南【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewer给用户看一份 PDF你可能搭过 iframe、加过下载按钮页面却始终不像个正经的预览器。react-doc-viewer 干的就是这件事它是一个 React 文件预览组件把 20 种常见格式的渲染都塞进一个 DocViewer 组件里——你给它文件地址它还你一个能翻页、能缩放的预览界面。 3 分钟上手装好组件并预览第一个文件一条命令安装React 17 及以上的项目都能用npm i cyntler/react-doc-viewer然后在入口引入它自带的样式文件写一个最小页面import DocViewer, { DocViewerRenderers } from cyntler/react-doc-viewer; import cyntler/react-doc-viewer/dist/index.css; export default function App() { const docs [{ uri: https://example.com/report.pdf }]; return DocViewer documents{docs} pluginRenderers{DocViewerRenderers} /; }uri 可以是远程地址也可以是打包进项目的本地文件pluginRenderers 传入内置渲染器列表即可启用全部格式。组件默认跟随内容撑开高度外层容器给它定个高就稳了。 它能帮你做什么按用户价值拆解功能多种格式直接渲染PDF、6 种图片格式、CSV、TXT、HTML、MP4共 20 种扩展名开箱即用PDF 自带翻页与缩放控件省掉你自己拼装各格式渲染库的活。上传的文件就地可看把用户上传的 File 转成 Object URL浏览器内的临时文件地址传进 documents不用等服务端转码就能回显上传流程少写一半代码。外观跟着你的主题走theme 属性改主色与文字色language 属性切换 14 个语言包译文在 src/locales/ 目录预览区能直接融进现有界面。不够用时留了扩展口写个自定义 renderer 挂进 pluginRenderers 就能支持新格式现成写法参考 渲染器源码碰到不支持的格式还能用 config.noRenderer 换成你自己的错误提示。 什么时候该用它3 类场景加 1 个例外如果你在搭知识库或 OA 系统可以让员工在浏览器里直接翻 PDF 合同、看 Excel 报表不必先装 Office。如果你是做在线教育或电商后台课件、产品说明书传上去立刻能看用户不用等下载。如果你在写文件管理页activeDocument 配合 onDocumentChange 就能做出点列表切文档的导航。不适合的场景Office 文档doc/docx/xls/xlsx/ppt/pptx 六类是通过微软 Office Online 的 iframe网页里嵌另一个网页的技术渲染的只认公网可访问的地址内网文件预览不了且作者已在 README 中说明暂停更新重度依赖前建议锁定版本。 实用建议与避坑4 条能直接照做做入口里 import 组件自带的 dist/index.css漏掉它 PDF 的排版会散架。避免把 Office 文档放在内网或私有地址再指望预览这六类格式只支持公网 URL。做文件存放在只允许 GET 请求的对象存储如带签名的 URL时把 prefetchMethod 从默认的 HEAD只取文件元信息的请求改成 GET并可用 requestHeaders 带上鉴权头。避免默认高度随内容撑开把页面拉长——给外层容器定高或在 config 里打开 pdfVerticalScrollByDefault 让 PDF 纵向滚动。从一行 documents 数组开始把它放进你下一个要展示文件的页面三分钟就能看到第一个预览。想翻源码克隆仓库即可动手git clone https://gitcode.com/gh_mirrors/re/react-doc-viewer【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考