纯前端文件预览File Viewer 直开 221 种文件【免费下载链接】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附件预览最真实的痛点不是打不开而是文件得先离开内网传统方案里预览一个 DWG 或合同 DOCX要么部署转码后端要么把文件上传到 SaaS 转换接口。File Viewer 是一个纯前端文件预览组件用 Worker 和 WASM 在浏览器里完成解析与渲染不走服务端转码。它注册了 221 个扩展名对应 32 条预览管线全部在客户端执行。⚙️ 它到底是怎么做到的一句话架构File Viewer 一共四层从框架组件到本地资源自上而下排布30 秒能建立完整心智模型。最上层是各框架组件Vue、React、Svelte、jQuery、Web Component只负责挂载、卸载和事件转发。第二层file-viewer/core框架无关负责渲染器注册表、生命周期、工具栏、搜索、打印这些统一契约。第三层是渲染器PDF、Word、Excel、CAD、压缩包等每个格式族一个独立包preset 则是渲染器的产品级组合。最底层是本地资源Worker、WASM、字体、vendor 文件都可以自托管内网环境零外网依赖。框架组件 (Vue / React / Svelte / jQuery / Web Component) │ file-viewer/core注册表 · 生命周期 · 工具栏 · 搜索 · 打印 │ preset / 单个 rendererPDF、Word、Excel、CAD、压缩包、邮件… │ 本地 Worker · WASM · 字体 · vendor 资源可自托管说白了组件只跟协议打交道格式能力像插件一样插拔重解析资源全部留在本地。 最小可运行示例下面这段代码做三件事装依赖、引入 Vue 3 组件、渲染第一个文件。npm install file-viewer/vue3-fullscript setup langts import { FileViewer } from file-viewer/vue3-full /script template FileViewer url/files/contract.docx :options{ theme: light, watermark: { text: 内部资料 } } / /templateFull 包已内置preset-all与同版本 Worker/WASM 资源不需要再装任何 preset。Vite 项目可另外注册file-viewer/vite-plugin自动发现已装 preset 并拷贝资源。React、Svelte、jQuery、原生 Web Component 都有对应包options 契约完全一致。三个典型工作流按使用频率挑了三个动作翻页看文档、看图纸、翻压缩包。在页面里直接翻页看合同PDF 与 Office 文档前端渲染开启pdf.navigation左侧显示页码缩略图与大纲树点击即可跳页文档内搜索高亮命中项支持上一条 / 下一条导航pdf.bbox可在首屏定位并高亮合同金额这类区域缩放旋转后高亮不丢pdf.streaming支持按 Range 渐进加载不必等整个文件下载完挂载前用precheckFileViewerSource()校验 PDF/Office 文件签名坏文件提前拒绝Office 文档前端渲染实际预览效果让工程师不装 CAD 就能在浏览器里预览 DWGLibreDWG WASM 解析DWG / DXF / DWF / DWFx 通过 WASM 在浏览器端解析不需要桌面 CADcad.renderer默认自动选择 webgl / canvas2d低配终端可强制 canvas2dcad.workerTimeoutMs给大图纸的解析设超时上限cad.wasmPath等资产可自托管内网部署零外网请求STEP / glTF / STL 等 3D 模型走独立的 3D 渲染器STEP 用本地 OCCT 建网格DWG 图纸在浏览器内直接解析把压缩包里的文件列出来但不想真的解压archive 渲染器ZIP / RAR / 7Z / TAR / ISO 等 20 压缩格式直接展示目录结构不要求完整解到磁盘点进嵌套文件走同一套渲染器注册表zip 里的 .docx 照样按文档渲染archive.cache启用 IndexedDB 缓存反复切换不重复解析archive.entryActions.download可按路径规则禁用嵌套文件的下载按钮maxArchiveSize/maxEntryPreviewSize限制内存占用防止压缩炸弹官方演示主工作区免服务端转码预览和老办法差在哪一句话把转码服务搬进浏览器后端只剩静态资源托管。维度服务端转码纯前端File Viewer部署依赖转码后端 存储 转换队列仅静态资源无新增服务文件是否离开浏览器上传到转码服务不上传离线 / 内网可用依赖转码服务在线可完全自托管格式上限取决于转码服务221 扩展名 / 32 条管线典型延迟转码 网络往返首屏直接解析重格式懒加载 WASM221 个扩展名的完整格式矩阵代价也要讲清楚重型格式CAD、3D、超大 PDF在浏览器里占内存文件越大越容易吃紧Full 包首屏体积大于单渲染器组合建议按 renderer 拆包chunkStrategy:renderer方便排查体积它是只读预览工具不是 Office / CAD 编辑器视觉保真度随文件结构和嵌入字体而异。按需装配纯前端文件预览的包体积控制设计意图是组件做薄壳能力按包装preset 是产品级组合lite / office / engineering / all单个 renderer 是格式级组合粒度自己选。# 最小集组件 办公预设PDF / Word / Excel / PPT / OFD npm install file-viewer/vue3 file-viewer/preset-office # 全集一个包搞定 npm install file-viewer/vue3-fullVite 项目注册file-viewer/vite-plugin后preset 会被自动发现、Worker/WASM 资源自动拷贝业务代码零手工 import。具体体积数字官方未公布以你打包器的 build report 为准。️ 安全与合规边界数据不出浏览器文件字节由你自己的前端拉取解析全在客户端完成严格 CSP 场景下把所有资产放在同一受信源即可。隔离机制标准组件默认走 Shadow DOM宿主页面样式进不去也出不来重解析在 Worker 里跑主线程保持响应。水印与审计文本 / 图片水印打印输出同样保留beforeOperation可给下载、打印等操作挂权限校验toolbar.permissions是硬闸门直接调 API 也会被拦。 踩坑与排障清单查看器空白宿主容器高度不稳定或文件扩展名无法识别 → 给容器固定高度必要时显式传type。Full 包报 libarchive Worker 未加载资产 404 后 SPA 返回了 HTML 兜底状态码 200 但内容不是 JS→ 检查/file-viewer/vendor/libarchive/worker-bundle.js是否返回真实 JS前缀非默认时用setDefaultFullAssetBaseUrl()指一次。WASM 实例化失败服务器 MIME 类型不对 → 给.wasm/.js/ 字体 / JSON 清单配置正确 MIME。升级后 DOCX 版式不变旧 Worker 或旧资源被缓存 → 重新部署同版本资产清 CDN 与服务 Worker 缓存确认请求的是新版docx.worker.js。扩展名在矩阵内但页面显示安装提示对应渲染器没装配 → 装对应 preset 或单个 renderer 包。npm 11 报Cannot read properties of null (reading matches)同一目录混用了 pnpm / bun 等包管理器 → 统一一个包管理器重置node_modules重装。 接入你现有的系统三条路径NPM 是主路径iframe 只用于特定场景。NPM 包推荐按技术栈选对应包五个框架共享同一份 options 契约只有组件写法不同。CDN / IIFEfile-viewer/web-full提供入口 script或直接整目录部署它的dist/——只拷入口 IIFE 不算完整部署。iframe 嵌入官方明确不推荐标准集成走 iframe仅用于嵌入官方演示或静态站场景文件经postMessage(Blob)交接iframe src/file-viewer/iframe.html?url/files/demo.docx stylewidth:100%;height:720px;border:0 allowfullscreen /iframe私有化 / 离线部署官方提供 Docker 镜像docker pull flyfishdev/file-viewer可镜像进内网 registry详见 Docker 部署文档 与 离线分发说明。生态与后续演进重型格式CAD、3D、大文档的 WASM 性能持续优化目标是压低低配终端的解析耗时。格式矩阵维持全部稳定状态当前 221 扩展名、0 实验性新格式以渲染器包形式增量加入。移动端触控交互与无障碍支持虚拟行号、屏幕阅读器继续完善。社区报兼容性问题时提供脱敏样本文件 浏览器版本最有价值截图不能替代样本。可贡献新渲染器 / preset 组合或修特定格式的边界案例。git clone https://gitcode.com/gh_mirrors/file/file-viewer后执行pnpm install pnpm dev本地跑起官方 demo先打开 example 目录里的样本 docx 试试。【免费下载链接】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），仅供参考