React 文件预览组件 react-doc-viewer如何一步让 20 种文件格式在线可看【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewerreact-doc-viewer 是一个面向 React 17 的 React 文件预览组件传入文件地址PDF、Word、图片和视频会直接在浏览器里渲染。适合需要在业务系统里加在线预览功能的前端开发者帮用户省掉下载再打开文件的一步。 为什么用户总得先下载文件才能看合同审批卡在先下载再看上员工要把 20MB 的 PDF 拉到本机只想看一页也得下完整文件。自建附件预览功能每种格式都得自己找库、自己拼装预览逻辑写完一版下版还得改。用户刚选出来的文件只以 Blob 形式存在于浏览器里很多预览组件只收 URL一到上传场景就得重新设计。 安装与初始化两段代码跑起来安装依赖npm i cyntler/react-doc-viewer再放入最小用法样式那一行别忘了import DocViewer, { DocViewerRenderers } from cyntler/react-doc-viewer; import cyntler/react-doc-viewer/dist/index.css; const docs [{ uri: https://public-url/sample.pdf }]; export default function App() { return DocViewer documents{docs} pluginRenderers{DocViewerRenderers} /; }跑通后你会看到一个文档查看器顶部是带文件名和上一份/下一份按钮的栏下面是逐页渲染在浏览器里的 PDF 正文可以缩放、翻页。内置格式有 20 种文件在列表里就打得开。 这个组件能帮你做什么用公开链接打开 Office 文档Word、Excel、PowerPoint 在浏览器里没有原生渲染途径内置渲染器通过 iframe 接上微软的在线查看服务。你把可公开访问的地址交出去文档就显示在页面里。系统附件存放在公开桶里时这条路最短。直接预览用户上传的文件用URL.createObjectURL把 Blob 变成对象 URL塞进 documents 即可预览全程发生在浏览器端文件不用先绕道你的服务器。适合表单提交、工单附件这类传完马上看的步骤。让预览界面贴合你的系统主题传一个 theme 对象顶栏背景、文字颜色、滚动条样式可以逐项改查看器不再像被硬塞进产品里的外来物。有品牌规范要求的团队通常半小时能配完。自定义渲染器、语言与请求行为渲染器可以按格式逐个挑选也可以为自己的格式写自定义渲染器。传 language 参数后界面文案会翻译成 14 种语言。文件放在需要鉴权的接口后面时给请求加requestHeaders就能带上 token。 值得上手的落地场景人事合同管理HR 在审批流里附上合同 PDF审批人在线翻页批阅不用下载到本地留存。客服聊天窗客服发来产品手册图片或 PDF用户直接在会话里打开看免去了先保存再打开。知识库文章运营把 Word 会议纪要挂到文章上只要地址是公开的同事点开即看无需装 Office。⚠️ 容易踩的四个坑PDF 排版错乱入口处没有引入随包发布的index.cssPDF 的布局样式都在这个文件里补一行引入即可。Word/Excel 打开是空白这类格式走微软在线服务只接受公开 URL放在登录态或私有桶里的文件打不开需把文件放到公开地址。文件一直加载不出来默认会先发 HEAD 请求探测文件类型部分云存储不支持可把prefetchMethod改为GET。项目维护状态作者已公告暂停开发锁定版本使用没问题但加新需求前先确认功能是否已存在没有再评估自行 fork。react-doc-viewer 把打开文件即预览变成了几行代码就能接入的事起步成本低于读这篇文章的时间。完整功能清单见 官方文档README.mdNext.js 的接入方式可参考 use-cases/nextjs 示例。【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考