Flyfish File Viewer：206 种文件格式，一个组件就够了
做过后台系统的都知道，附件预览是个绕不开的需求。
OA 里要预览 Word 合同、知识库里要内嵌 PDF、工单系统要看 CAD 图纸、邮件归档要解析 .eml……每来一个新格式，就要翻一遍 GitHub 找个能用的库，然后拼凑进项目。
最后页面长什么样？每个文件一种预览方式，跳来跳去，体验割裂得不行。
Flyfish File Viewer 就是冲着这个问题来的。
它是干什么的？
一句话：纯前端的文件预览组件，支持 206 种扩展名，24 条预览链路。
给一个文件 URL，它自动识别格式、加载对应的渲染引擎，在浏览器里打开给你看。PDF、Word、Excel、PPT、CAD、压缩包、邮件、3D 模型、思维导图、代码——全在一个组件里搞定。
不需要后端转码，不需要搭 Office Server，不需要 LibreOffice 守护进程。
GitHub ⭐ 1.2k，Apache-2.0 开源。
一个组件，七个框架
最让人舒服的是它对各框架一视同仁。
| 技术栈 | npm 包 |
|---|---|
| Vue 3 | @file-viewer/vue3-full |
| Vue 2.7 | @file-viewer/vue2.7-full |
| Vue 2.6 | @file-viewer/vue2.6-full |
| React 18/19 | @file-viewer/react-full |
| React 16.8/17 | @file-viewer/react-legacy-full |
| Svelte | @file-viewer/svelte-full |
| jQuery | @file-viewer/jquery-full |
| Vanilla JS (Script 标签) | @file-viewer/web-full（IIFE, CDN 直达） |
接入方式也极其简单，以 Vue 3 为例：
import FileViewer from '@file-viewer/vue3-full'
createApp(App).use(FileViewer).mount('#app')模板里直接写 “ 就行。
如果不想引入任何框架，甚至可以用 Script 标签 + Web Component：
Web Component 自带 Shadow DOM 隔离宿主样式，你不用担心自己的 CSS 污染预览区域。
格式覆盖：206 个扩展名，24 条链路
说「覆盖广」不能只靠嘴。看这张表：
| 类别 | 格式 |
|---|---|
| Word | docx, docm, dotx, rtf, odt（.doc 走 msdoc-viewer） |
| Excel | xlsx, xls, xlsb, csv, ods, numbers |
| PPT | pptx, pptm, potx, ppsx, odp |
| pdf（基于 pdfjs-dist，支持分片/分页/搜索/打印） | |
| 版式文档 | ofd（国产版式） |
| CAD | dwg, dxf, dwf, dwfx, xps |
| 3D 模型 | glb, gltf, obj, stl, ply, fbx, step, ifc 等 |
| EDA 版图 | olb, dra, gds, oas, oasis |
| 压缩包 | zip, 7z, rar, tar, gz, cab, iso, jar, apk, cbz 等 |
| 邮件 | eml, msg, mbox |
| 绘图 | excalidraw, drawio, mermaid, plantuml |
| 思维导图 | xmind |
| 电子书 | epub, umd |
| 代码/文本 | md, json, ts, py, sql, sh, 代码高亮 |
| 图片 | jpg, png, webp, gif, svg, psd |
| 音视频 | mp4, mp3, wav, ogg 等 |
| 结构化数据 | sqlite, parquet, geojson, kml |
16 大类，206 个扩展名，24 条独立的预览链路。
而且每个渲染器是按需加载的。 PDF、Office、CAD、压缩包这些重型引擎不会挤进首屏——只有当你打开对应类型的文件时，对应的 Worker/WASM 才会被异步拉下来。
你的页面不会因为引入一个预览组件而变慢。
架构设计：不止是能打开
Flyfish File Viewer 不是那种「一个文件解决所有问题」的巨无霸。
它把能力拆成了四层：
- Core——TypeScript 核心，格式检测、渲染编排、事件系统
- Renderer——独立的渲染引擎（
@file-viewer/renderer-pdf、@file-viewer/renderer-docx等） - Preset——预设组合（
preset-lite/preset-office/preset-engineering/preset-all） - Full——一步全量的便捷包
想精确裁剪就装 core + renderer-pdf + preset-lite；想最快上手直接拉 *-full。
预览器本身的功能也相当完整：搜索、高亮、缩放、打印、导出 HTML、下载、水印、主题切换、工具栏权限控制、生命周期钩子——都是统一 API，不因格式不同而体验分裂。
部署方式
既然是面向企业内网的，部署场景必须灵活。它支持：
- npm 包直接集成（最推荐）
- Docker 镜像：
flyfishdev/file-viewer:latest - GitHub Release 制品：解压
tar.gz放到静态目录 - 自托管 CDN：Worker/WASM/字体都可以私有化部署
- Cloudflare Pages
甚至连 iframe 集成都有——下载官方的 iframe 包，一行 “ 就能在任何系统里用。
一个小遗憾
说点真实的。
Flyfish File Viewer 的完整源码是付费的。GitHub 仓库是公开的 npm 包和二二发版物，但要拿到完整的 TypeScript 源码进行二次开发，需要去他们的 shop 购买（目前 4.99 刀起）。
不过对于绝大多数场景——集成进内部系统、用预设能力做附件预览——npm 包的功能已经完全够用。Apache-2.0 协议也允许在保留版权的前提下商用。
如果你是企业内部要搞一个附件预览中心，或者你的 SAAS 产品需要一个「上传文件就能看」的能力，Flyfish File Viewer 可能是你花最少时间、得到最多格式覆盖的选择。
资源
- GitHub: https://github.com/flyfish-dev/file-viewer
- 在线 Demo: https://demo.file-viewer.app
- 官方文档: https://doc.file-viewer.app
- 官网: https://file-viewer.app
- Docker:
flyfishdev/file-viewer:latest
评论