如何 3 步在企业系统里落地浏览器内文件预览File Viewer 完整指南【免费下载链接】file-viewerBrowser-native Office / PDF / CAD / archive viewer for internal web apps, with Vue, React, Svelte, jQuery, Web Components, and no server-side conversion.项目地址: https://gitcode.com/gh_mirrors/file/file-viewerOA 的附件卡在第三方转码服务上内网环境又根本连不出去——这类文件预览的常见僵局可以用一个纯前端方案解开。File Viewer 是一个企业级纯前端文件预览组件库解析与渲染全部发生在浏览器内文件不出网开箱即支持 221 个文件扩展名、32 条预览链路并原生覆盖 Vue、React、Svelte、jQuery 与 Web Component。File Viewer 工作区DOCX、PPTX、DWG 与三维 STEP 模型均在浏览器内直接打开⚡ 为什么值得选 File Viewer文件不出浏览器。解析、渲染全在前端完成合同、图纸、内部报表不必经过任何转码服务器慢和隐私两个问题一起消掉。格式矩阵可核验。221 个已注册扩展名、32 条预览链路覆盖 Office、PDF/OFD、CAD、3D 模型、压缩包、邮件、代码与音视频全部标记为稳定没有实验项占位。模块化按需装配。组件包默认轻量preset 按场景整组加载也可以只装一个 rendererPDF、CAD、压缩包等重型资源命中对应格式才拉取用不到的格式不产生体积成本。跨框架一份 API。同一套 options、事件和 controller在 Vue 3、React、Svelte、jQuery 中体验一致换技术栈不用重学。自托管到底。Worker、WASM、字体和 vendor 资产全部可放在自有网络配合 Docker、私有 CDN 或完整离线包交付内网与严格 CSP 环境均可部署。 三步跑起来第 1 步安装。按框架选包*-full已内置全量 preset无需再装能力包npm i file-viewer/vue3-full第 2 步注册并使用组件。script setup langts import { FileViewer } from file-viewer/vue3-full /script template FileViewer url/files/contract.pdf :options{ theme: light } / /templateReact 侧对应file-viewer/react-fullSvelte、jQuery、原生 Web Component 各有同名入口props 与 options 保持一致。第 3 步验证首个结果。给父容器一个稳定高度组件会填满容器指向一个本地测试文件即可。如果打开的是已支持但尚未装配的格式预览器会提示应安装哪个 preset 或 renderer而不是笼统显示不支持。跑完官方 Demo 静态包可以一次性验证全矩阵pnpm install pnpm dev即得到与线上同链路的演示站点。 核心能力拆解文档链路文件类型预览方式Worddocx/doc 等Worker 解析、连续流式阅读目录字段缓存、异步分批渲染Excelxlsx 等 9 种虚拟滚动表格大文件自动切 Worker小文件走主线程PowerPoint二进制 .ppt 用独立 WASM 引擎OpenXML 走渐进解析PDF / OFD支持 Range 分片加载OFD 承接国产电子发票、公文工程与数据链路文件类型预览方式CADDWG/DXF/DWFWorker LibreDWG WASM 浏览器内解析3D 模型STEP/GLTF/点云等本地 OCCT Worker/WASM 真实三角化保留装配层级压缩包zip/7z/rar 等 30 种WASM Worker 读目录点哪个文件解哪个邮件eml/msg/mbox头信息、正文与附件一站式预览代码 / 文本语法高亮超大文件自动切有界虚拟行所有格式共享同一套操作层搜索高亮、真实比例缩放、打印、导出 HTML、文字或图片水印、明暗主题、生命周期钩子和按钮前置权限校验。 场景里怎么落地文档比对页支持左右并排与同步滚动适合合同版本核对OA 与审批流。审批附件以 Word 页面样式呈现表格保留合并单元格与样式。搭配file-viewer/preset-office即可覆盖 PDF、Word、Excel、PPT、OFD 与 RTF是最常见的起步组合。工程资料库。设计图纸初筛不必先装 CAD 软件CAD 走 WASM 解析STEP/IGES 走本地三角化GeoJSON/KML 落离线地图。preset-office与preset-engineering可以在同一个preset数组里组合一个系统同时吃下办公与工程附件。工单与知识库。附件来自业务接口时把Blob包成带扩展名的File传给组件不依赖公开 URL也不引入任何 npm 包的 iframe 交付包同样可用适合不愿改构建链路的存量系统。⚙️ 它是怎么实现的整体分四层file-viewer/core负责格式识别、资源加载与操作契约renderer-*是 17 个独立格式包preset-*按 lite / office / engineering / all 四档组合能力各框架组件只做原生封装互不嵌套。ComponentsVue3 / React / Svelte / jQuery / Web Component └─ Presetslite / office / engineering / all └─ Renderersword / pdf / cad / archive / 3d / ... └─ Core识别 · 生命周期 · 搜索 · 缩放 · 打印 · 导出三个值得注意的工程决策重型解析docx、Excel、CAD、libarchive全部隔离在Worker WASM中主线程只保留 UI 响应预览器默认Shadow DOM 强隔离宿主全局 CSS 不会污染工具栏和正文自定义走 CSS 变量与稳定 Shadow Parts所有运行时资产默认指向部署基址下的file-viewer/目录换域名不改代码。️ 排坑清单预览区域一片空白。先确认两件事父容器有稳定高度文件有可识别扩展名或显式type。这是出现频率最高的两个原因。部分格式提示未装配或停在 loading。full 包的完整能力依赖运行时资产Vite 项目注册fileViewerRenderers({ copyAssets: true })其他构建工具执行npx --no-install file-viewer-copy-assets ./public/file-viewer把资源发布到file-viewer/目录即可。Worker/WASM 加载失败。检查请求返回的必须是真的 JS/WASM 文件而不是 SPA 的 HTML fallback静态服务器要给出正确的 MIME 类型严格 CSP 环境把资产放在同一可信源下。npm 安装报Cannot read properties of null (reading matches)。这通常是混用包管理器后 node_modules 里的 symlink 触发 npm 内部崩溃不是版本不匹配。一个项目只用一个包管理器清理依赖目录后重装即可。接口返回的是 Blob 或 ArrayBuffer。先new File([blob], name.docx)包装出扩展名再传入组件不要依赖下载 URL 上的路径。另外提醒一句官方 iframe 交付包适合整体嵌入官方 Demo的交付场景标准集成请优先使用对应框架的原生组件调试路径更短。下一步File Viewer 把文件上第三方这件事从选项里删掉了预览留在浏览器延迟和隐私边界同时收紧接入成本只剩一次 npm 安装。完整 API、快速开始、组件用法 与 Docker 部署 都收在 docs 目录里从这三篇起步就够把第一个附件页跑通。文件留在浏览器里预览才算真正完成。【免费下载链接】file-viewerBrowser-native Office / PDF / CAD / archive viewer for internal web apps, with Vue, React, Svelte, jQuery, Web Components, and no server-side conversion.项目地址: https://gitcode.com/gh_mirrors/file/file-viewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考