React 文件预览：装好 react-doc-viewer，喂给它第一个文件

React 文件预览装好 react-doc-viewer喂给它第一个文件【免费下载链接】react-doc-viewerFile viewer for React.项目地址: https://gitcode.com/gh_mirrors/re/react-doc-viewer想在 React 应用里做文档预览又不想为每种格式各接一套渲染方案react-doc-viewernpm 包名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配onDocumentChange1.13.0 之后还能通过DocViewerRef调 prev/next 翻文档。注意组件默认高度随内容伸缩、宽度撑满父容器外层要给它一个约束尺寸。支持哪些格式Office 的坑在哪类别格式渲染方式文档PDF基于 react-pdf带缩放、翻页、多页视图图片PNG / JPG / GIF / WebP / BMP / TIFFTIFF 走前端 canvas 解析Officedoc / docx / xls / xlsx / ppt / pptx / odtiframe 内嵌 Office 在线查看服务其它CSV / TXT / HTML / MP4CSV 经 papaparse 解析成表格HTML 写进沙箱 iframe渲染器怎么选每个渲染器声明自己的fileTypes和weight组件按文件类型匹配后取权重最高的那个内置清单在src/renderers/index.ts。Office 文件说白了不是本地渲染的——组件把文件 URL 交给 Microsoft 的在线查看服务在 iframe 里显示所以 URL 必须公开可访问。私有、需鉴权的 Office 文件这条路走不通目前浏览器端也确实没有原生的 Office 渲染方案。换个皮肤换个语言主题theme传个对象primary、secondary和textPrimary这类色值就能改默认值定义在src/defaultTheme.ts语言传languagepl之类的 prop 即可翻译文件共 14 份放在src/locales配置config里能关顶部栏、设 CSV 分隔符、调 PDF 默认缩放和步进请求预取默认发 HEAD 猜 Content-Type只允许单一 verb 的服务改成prefetchMethodGET私有资源用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），仅供参考