在前端开发中，文件预览几乎是个不可避免的需求。PDF 用一个库、Word 又一个方案、Excel 再换一套，图片视频自己实现，压缩包只能下载，遇到 CAD、3D、GIS 这些复杂格式，很多项目直接放弃。最后功能虽然能用，但体验非常割裂——有的跳出新页面，有的强制下载，样式也完全不统一。

最近试用了一个开源项目 Open File Viewer，体验比预期好不少。它不是一个简单的 PDF 预览组件，而是一个面向 Web 应用的前端文件预览 SDK，核心思路是把各种文件预览统一封装到一个可控容器中，让用户在弹窗、抽屉、详情页、审批流、附件中心里直接预览，而不是动不动就跳页面或强制下载。

统一预览容器，解决后台系统的核心痛点

真实业务中的文件预览往往不只是"打开一个文件"，还要处理加载状态、错误处理、不支持格式的兜底、多文件切换、下载、全屏、搜索、打印、主题切换、工具栏扩展等一堆细节。以前这些功能需要东拼西凑，Open File Viewer 把它们收进了一套完整体系里。

目前支持 Vanilla JavaScript、React、Vue、Svelte 四种框架，底层采用框架无关的 core 设计，不同框架只是各自的适配层。老项目可以用原生 JS，新项目可以用 React、Vue 或 Svelte，核心预览能力完全复用。

110 种文件格式覆盖

Open File Viewer 最吸引人的点是格式覆盖足够广，支持 110 种文件格式，不仅仅是常见的几种文件，而是把很多业务系统中经常出现、但前端又很头疼的格式都考虑到了：

• 图片类：jpg、png、gif、webp、avif、svg、bmp、tiff、heic、heif
• 视频类：mp4、webm、mov、avi、mkv、flv、wmv、m3u8
• 音频类：mp3、wav、ogg、aac、m4a、flac、opus
• 文本/代码类：txt、md、json、yaml、xml、js、ts、vue、html、css、py、go、rs
• PDF/电子书类：pdf、epub、xps、oxps
• Office 文档类：docx、rtf、odt、xlsx、csv、pptx、odp、wps、et、dps
• 压缩包类：zip、rar、7z、tar、gz、tgz、bz2、xz
• 邮件类：eml、msg、mbox
• CAD/工程图纸类：dxf、dwg、dwf、step、stp、iges、ifc、skp
• 3D 模型类：gltf、glb、obj、stl、fbx、dae、ply、3mf、usdz
• GIS 地理数据类：geojson、topojson、kml、kmz、gpx、shp
• 设计资产/数据文件类：ttf、woff2、psd、ai、eps、sqlite、wasm、parquet、avro

当然，110 种格式不代表每一种都已经做到高保真完美预览。图片、音视频、文本、代码、PDF 这些基础格式预览能力已经很成熟；Office、电子书、邮件、压缩包属于基础到增强预览；CAD、3D、GIS、设计稿这类复杂格式更偏识别、基础预览和持续增强。但这个方向是对的——先把预览入口、容器、状态、插件协议和兜底机制统一起来，后续复杂格式可以继续增强，可以接 WASM 也可以接服务端转换。

自定义工具栏

另一个很实用的点是自定义工具栏。很多预览库 Demo 看着不错，一接业务就不够用了——默认只有下载、全屏、关闭几个按钮。但真实系统里，用户预览文件之后往往还要继续做操作：看完合同直接审批、看完资料直接归档、看完附件打标签或标记已读。所以工具栏不能写死。

Open File Viewer 的工具栏支持分层定制：可以只改文案（比如把 Download 改成"下载"），可以调整按钮顺序，可以换图标、增加业务按钮，甚至可以完全替换整套工具栏。这对 OA、CRM、ERP、审批系统、网盘、知识库特别有用，因为这些系统里的文件预览本质上是业务流程的一部分。

插件机制

更核心的设计是插件机制。以前做文件预览通常在业务代码里写一堆判断——PDF 走 PDF 逻辑、图片走图片逻辑、都不支持就下载。格式少的时候还能撑住，格式一多就很难维护。

Open File Viewer 把这些能力拆成了独立插件，每个插件只负责一类文件，核心只负责识别文件、匹配插件、挂载渲染和处理状态。内置 15+ 预览插件包括 imagePlugin()、videoPlugin()、audioPlugin()、textPlugin()、pdfPlugin()、officePlugin()、archivePlugin()、emailPlugin()、cadPlugin()、model3dPlugin()、gisPlugin() 等。

它还支持自定义插件。公司内部如果有特殊格式（比如 .report、.logx、.schema），可以单独写一个插件放进插件列表，优先匹配。这样主流程不会被污染，业务特殊格式也能独立维护。

总结

如果你的项目只是偶尔预览一张图片或一个 PDF，随便找个库也能用。但如果你在做长期维护的业务系统，附件类型会越来越多，预览场景会越来越复杂，Open File Viewer 很值得关注。

它的价值不只是"能预览多少格式"，而是把文件预览做成了一套体系：

• 110 种文件格式覆盖
• 自定义工具栏
• 插件机制（15+ 内置预览插件）
• 支持自定义插件
• Vanilla JS / React / Vue / Svelte 全框架适配
• 统一容器内预览，统一状态和 fallback

前端文件预览，真的不应该再靠一堆零散库硬拼了。

开源项目地址：github.com/xushanpei/open-file-viewer，npm 包：@open-file-viewer/core