支持 110 种文件预览！兼容 Vue、React、Svelte！

前端做文件预览，基本都踩过坑。

PDF 一个库，Word 一个库，Excel 一个方案，图片视频自己写，压缩包直接下载，复杂一点的 CAD、3D、GIS 文件，很多项目干脆放弃。

最后功能是能用，但体验很割裂：有的跳出当前 tab，有的打开新页面，有的强制下载，有的样式完全不统一。

说白了，就是能用，但不好用。

最近试了一个库，体验比我预期好很多：Open File Viewer。

它不是单纯做 PDF 预览，也不是又封装一个图片预览组件，而是一个面向 Web 产品的前端文件预览 SDK。

核心思路很直接：把各种文件预览统一放进一个可控容器里，让你可以在弹窗、抽屉、详情页、审批流、附件中心里直接预览，而不是动不动跳页面或者强制下载。

这点对后台系统很重要。

因为真实业务里的文件预览，往往不只是"打开一个文件"。

它还要处理加载、错误、不支持格式、多文件切换、下载、全屏、搜索、打印、主题、工具栏扩展等一堆细节。

以前这些东西都要自己东拼西凑，现在 Open File Viewer 直接把它们收进一套体系里。

目前它支持：

txt 复制代码

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、设计稿这类复杂格式，更偏识别、基础预览和持续增强。

但这个方向是对的。

文件预览本来就不是靠一个库把所有复杂格式一次性做到完美，尤其是 Office、CAD、设计稿这种格式，本身就很复杂。

真正重要的是先把预览入口、容器、状态、插件协议和兜底机制统一起来。

只要底座统一，后面复杂格式就可以继续增强，可以接 WASM，也可以接服务端转换。

自定义工具栏

我觉得它另一个很实用的点，是自定义工具栏。

很多预览库 Demo 看着还行，一接业务就不够用了。

默认就几个按钮：下载、全屏、关闭。

可真实系统里，用户预览文件之后，往往还要继续做操作。

比如：

txt 复制代码

看完合同，直接审批
看完资料，直接归档
看完文档，直接收藏
看完附件，直接分享
看完文件，打标签或标记已读

所以工具栏不能写死。

Open File Viewer 的工具栏可以分层定制。你可以只改文案，比如把 Download 改成"下载"；

也可以调整按钮顺序，把搜索、下载、分享、审批、全屏按你的业务顺序排好；还可以换图标、增加业务按钮，甚至完全替换整套工具栏。

这对 OA、CRM、ERP、审批系统、网盘、知识库特别有用。

因为这些系统里的文件预览，本质上经常是业务流程的一部分。

工具栏能不能扩展，决定了这个组件到底只是一个 Demo，还是能真正放进业务系统。

插件机制

Open File Viewer 更核心的设计，是插件机制。

以前我们做文件预览，通常是在业务代码里写一堆判断：

txt 复制代码

PDF 走 PDF 逻辑
图片走图片逻辑
Word 走 Word 逻辑
压缩包走压缩包逻辑
都不支持就下载

格式少的时候还能撑住，格式一多就很难维护。

Open File Viewer 把这些能力拆成了插件。

每个插件只负责一类文件，核心只负责识别文件、匹配插件、挂载渲染和处理状态。

内置插件包括：

ts 复制代码

imagePlugin()
videoPlugin()
audioPlugin()
textPlugin()
pdfPlugin()
officePlugin()
archivePlugin()
emailPlugin()
drawingPlugin()
cadPlugin()
model3dPlugin()
gisPlugin()
fallbackPlugin()

这套机制很清晰。

图片交给 imagePlugin()，视频交给 videoPlugin()，文本和代码交给 textPlugin()，PDF 交给 pdfPlugin()，Office 交给 officePlugin()，压缩包交给 archivePlugin()，邮件交给 emailPlugin()，CAD、3D、GIS 也都有对应插件。

更重要的是，它支持自定义插件。

公司内部经常会有一些奇怪格式，比如 .report、.logx、.schema、.flow。

以前遇到这种文件，只能在业务代码里硬写判断。现在可以单独写一个插件，把它放进插件列表里，让它优先匹配。

这样主流程不会被污染，业务特殊格式也能独立维护。

这才是文件预览库该有的扩展方式。

写在最后

如果你的项目只是预览一张图片，或者打开一个 PDF，随便找个库也能用。

但如果你做的是长期维护的业务系统，附件类型会越来越多，预览场景会越来越复杂，那 Open File Viewer 很值得看。

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

txt 复制代码

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

这才是我觉得它好用的地方。

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

如果你觉得这个项目对你有帮助，也欢迎去 GitHub 点个 Star 支持一下。

开源项目不容易，大家的每一个 Star，都是继续迭代下去的动力。

官网地址 ：https://open-file-viewer-workspace.void.app/
Github 地址 ：https://github.com/xushanpei/open-file-viewer
npm 地址 ：https://www.npmjs.com/package/@open-file-viewer/core