React文档预览组件实战指南3步在 cyntler/react-doc-viewer 中接入在线文件预览【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewer如果你的 React 项目需要“不下载、直接在浏览器里看”的能力——用户提交的 PDF、产品说明或附件——可以考虑 cyntler/react-doc-viewer。它把 PDF、Word、Excel、图片、CSV、视频等常见文件类型直接在页面上渲染出来支持公开 URL 和本地 Blob 两种来源接入时只需要引入一个组件和一组渲染器。这个组件解决哪类文件预览需求支持预览哪些文件格式组件按“文件类型对应渲染器”的方式组织开箱可用的扩展名约 20 个文档类pdf、txt、html、htm、odt、csv、办公类doc/docx、xls/xlsx、ppt/pptx、图片类png、jpg、gif、bmp、tiff、webp以及视频mp4。如果业务只涉及其中几种不必全部引入单独传入PDFRenderer、PNGRenderer也可以组件会按文件类型匹配到对应渲染器。哪些文件能在本地直接预览办公文档这里有一个实现细节必须提前确认Office 文件doc/docx、xls/xlsx、ppt/pptx并非组件自己解析而是通过 Microsoft Office 在线服务以 iframe 方式打开因此只支持公开可访问的 URL。需要登录鉴权或仅内网可见的文件走不通这条路径。PDF 与图片是浏览器原生渲染不受该限制影响。安装并渲染第一份文档最小接入示例安装与引入npm i cyntler/react-doc-viewer组件要求 React 17并需要你手动引入一份随包发布的 CSS否则 PDF 等类型的渲染样式不完整import DocViewer, { DocViewerRenderers } from cyntler/react-doc-viewer; import cyntler/react-doc-viewer/dist/index.css;远程地址与本地文件如何同时渲染documents接收一个数组每项的uri既可以是远程地址也可以是本地文件路径const docs [ { uri: https://cdn.example.com/contract.pdf }, // 远程 URL { uri: require(./files/report.png) }, // 本地文件 ]; DocViewer documents{docs} pluginRenderers{DocViewerRenderers} /默认展示数组里的第一份文件容器高度会随文件内容自动伸缩宽度占满父容器。若要控制初始展示或程序化切换当前文件用initialActiveDocument或activeDocument配合onDocumentChange。本地上传文件如何接入浏览器里用户上传的文件先用URL.createObjectURL生成对象 URL 再传入即可const docs files.map((f) ({ uri: window.URL.createObjectURL(f), fileName: f.name, }));注意对象 URL 外部无法访问用户本地上传的 Office 文件会因此预览失败这类入口建议限定为 PDF、图片等浏览器原生支持的格式。调整外观与异常提示如何调整查看器主题色theme属性提供主色、背景色、文字色等一组配置可以改成与你系统视觉一致DocViewer documents{docs} theme{{ primary: #5296d8, secondary: #ffffff, textPrimary: #ffffff }} /加载与不支持的格式如何给出友好提示文件加载超过 500 毫秒时组件默认展示加载动画找不到可用渲染器时则显示默认错误文案。两者都能通过config替换config.loadingRenderer.overrideComponent自定义加载态config.noRenderer.overrideComponent自定义“不支持的格式”展示showLoadingTimeout可以调整或关闭 500 毫秒阈值。面向多语言产品还可以传language属性翻译文件位于 src/locales/覆盖 14 种语言。网络请求的两个细节预览前组件会默认预请求文件地址读取 Content-Type 以判定文件类型如果存储端只允许特定方法例如 S3 的签名 URL用prefetchMethod指定需要鉴权时通过requestHeaders附加请求头。适合与不适合的判断适合需要在浏览器内直接展示用户上传或附件文档的中后台系统、内容平台与表单类页面。不适合私有办公文档占比高无法提供公开链接或要求纯离线、纯内网部署Office 预览依赖外部在线服务的场景。需注意作者已在仓库中说明该库暂停维护选型前评估当前版本1.17.x是否覆盖你的需求以及能否接受长期停更。实际效果可以运行 use-cases/nextjs/ 里的 Next.js 示例项目src/exampleFiles/ 存放了各格式样例文件便于逐类型验证渲染结果。【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考