React 文件预览实战react-doc-viewer 十分钟接入文档在线查看【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewerreact-doc-viewer 是一个 React 文件预览组件面向 React 17 及以上版本。引入后PDF、Office 文档、图片、视频、文本都能在浏览器里直接查看不必为每种文件类型自写一套预览逻辑。 没有预览能力时麻烦会怎么出现客服工单写着客户说附件打不开你的第一反应多半是回复下载到本地打开。但多数用户只想瞄一眼第一页。 产品同事丢来一份 docx让你先看看效果你才想起来浏览器没有原生的 Office 预览得自己去找服务。 自己搭的话要逐个判断文件类型、为每种格式找渲染方案再处理跨域和加载失败。这些工作正是 React 文档在线查看组件要替你干的。 安装与最小示例安装只需一条命令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://example.com/a.pdf }]; export default () ( DocViewer documents{docs} pluginRenderers{DocViewerRenderers} / );css 那行必须引入否则 PDF 页面样式会乱。documents 里可以放多个文件顶部会出现切换条。 支持哪些格式一张表看全内置渲染器一共覆盖 20 个扩展名格式类别支持格式备注文档pdf、doc/docx、xls/xlsx、ppt/pptx、odtOffice 格式走微软在线服务仅公开 URL图片png、jpg、gif、webp、bmp、tiff浏览器直接渲染文本与表格txt、csv、html/htmcsv 分隔符可配置视频mp4用原生播放器渲染文件来源有两种远程 URL 和本地 Blob 对象比如用户上传的文件都填进 uri 字段即可。三个业务场景的落地做法OA 知识库。员工把报告传进知识库需要随时查阅。文件存成公开 URL 后直接传给 DocViewer再用 theme 把配色调成和系统一致。不下载、不开 Office浏览器承担全部预览工作。电商商品页。买家下单前想看说明书。把产品说明书的 pdf 或图片放进 documents 数组用 onDocumentChange 记录当前查看的文件。售前说明书在哪的咨询减少还能沉淀浏览数据。用户提交文件审核。审核流里审核员要检查用户提交的材料。上传控件拿到的 File 对象转成 blob url以 uri 传入。图片和文档共用同一组件一套接入覆盖全部。⚠️ 常见坑与对应解法Office 文件打开是空白doc、docx 等依赖微软在线服务只接受公开 URL私有文件别放内网地址或用 pluginRenderers 换自己的渲染器。PDF 排版错乱漏引了包内 css 文件在应用入口补一次 import 即可。React PDF 预览大文件发慢组件默认不做分页和懒加载限制单文件体积或改用 pdfVerticalScrollByDefault 连续滚动。想从外部切页给组件传 ref调用 DocViewerRef 暴露的 prev 和 next 方法。不支持的格式提示不友好用 config 里的 noRenderer 覆盖渲染自己的错误组件。库的维护节奏偏慢作者已公告暂停更新固定版本号确认发布内容后再升级。收个尾react-doc-viewer 把自己造换成了配置一下。你拿到的是一个带导航、主题和 14 种界面语言的现成文件预览组件。如果你的需求只是让用户在线看到文件它的覆盖范围已经足够。下一步在本地起一个工程把上面的代码贴进页面丢一份真实的 pdf 进去十分钟就能看到全部行为。【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考