前端做文件预览基本都踩过坑：PDF 一个库，Word 一个库，Excel 一个方案，图片、视频自己写，压缩包直接下载，复杂一点的 CAD、3D、GIS 文件，很多项目干脆放弃。能用，但不好用。有的跳出当前 tab，有的打开新页面，有的强制下载，有的样式完全不统一。最后用户体验割裂，代码也越来越难维护。
最近试了一个库：Open File Viewer。它不是单纯的 PDF Viewer 或图片预览组件，而是一套面向 Web 产品的前端文件预览 SDK。
核心思路很简单：把各种文件预览统一放进一个可控容器里。可以把它放到弹窗、抽屉、详情页、审批流、附件中心里直接用，不用跳新页面，也不用强制下载。
目前支持 Vanilla JavaScript、React、Vue、Svelte 四种框架。底层是框架无关的 core，不同框架只是适配层。老项目能接，新项目也能接，核心能力可以复用。
110 种文件格式覆盖
Open File Viewer 目前覆盖 110 种文件格式，不只是常规的图片、视频、PDF，还包括很多业务系统里常见但很麻烦的格式。
覆盖范围包括：
- 图片类：jpg、png、gif、webp、svg、heic
- 视频类：mp4、webm、mov、avi、mkv
- 音频类：mp3、wav、flac、ogg
- 文本和代码类：txt、md、json、yaml、js、ts、vue、html、css、py、go、rs
- 文档类：pdf、epub、xps、docx、xlsx、pptx、wps、et、dps
- 压缩包类：zip、rar、7z、tar
- 邮件类：eml、msg、mbox
- 工程图纸类：dxf、dwg、step、ifc
- 3D 模型类：gltf、glb、obj、stl
- GIS 相关：geojson、kml、gpx、shp
- 其他：psd、ai、sqlite、wasm、parquet
110 种格式覆盖不等于每一种都已高保真完美预览。基础格式如图片、音视频、文本、代码、PDF 的预览能力比较明确；Office、电子书、邮件、压缩包属于基础到增强；CAD、3D、GIS、设计稿这类复杂格式更偏识别、基础预览和持续增强。但重点不在于一次性把所有格式做到完美，而是先把预览入口、容器、状态、插件协议和 fallback 机制统一起来。只要底座统一，后面复杂格式可以继续增强，可以接 WASM、专用解析器，也可以接服务端转换。
自定义工具栏
很多预览库看 Demo 还行，一进业务就不够用了。默认按钮只有下载、全屏、关闭。但真实业务里，用户看完文件后，经常还要继续操作：审批、收藏、分享、归档、打标签、标记已读。
Open File Viewer 支持自定义工具栏，可以改文案、调顺序、换图标、增加业务按钮，甚至完全替换整套工具栏。这对 OA、CRM、ERP、审批系统、网盘、知识库这类产品很有用。文件预览不再只是一个弹窗，而是可以直接接入业务流程。
插件机制
Open File Viewer 更核心的设计是插件机制。
以前做文件预览，经常在业务代码里写一堆判断：PDF 走 PDF 逻辑，图片走图片逻辑，Word 走 Word 逻辑，格式一多就失控。Open File Viewer 把不同类型的预览能力拆成插件：
- imagePlugin() — 图片
- videoPlugin() — 视频
- audioPlugin() — 音频
- textPlugin() — 文本和代码
- pdfPlugin() — PDF
- officePlugin() — Office 文档
- archivePlugin() — 压缩包
- emailPlugin() — 邮件
- drawingPlugin() — 工程图纸
- cadPlugin() — CAD 文件
- model3dPlugin() — 3D 模型
- gisPlugin() — GIS 文件
- fallbackPlugin() — 兜底处理
更重要的是，它支持自定义插件。如果公司内部有特殊格式，可以自己写插件接进去，不用把一堆判断塞进业务代码里。
总结
Open File Viewer 的核心价值很明确：
- 110 种文件格式覆盖
- 支持 Vue / React / Svelte / 原生 JS
- 自定义工具栏
- 插件机制 + 15+ 内置预览插件
- 统一容器内预览，统一状态和 fallback
它的核心价值在于：不是只给你几个预览能力，而是给你一套可扩展的预览架构。前端文件预览，真的不应该再靠一堆零散库硬拼了。
GitHub 地址：github.com/xushanpei/open-file-viewer
