介绍

Flyfish Viewer（官方全称 @file-viewer / Flyfish File Viewer）是飞鱼开源工作室推出的纯前端模块化全格式文件预览组件库，主打浏览器本地解析渲染，无需后端转码服务，是企业后台、网盘、OA、工程系统主流文件预览解决方案，开源协议 Apache-2.0，支持免费商用与二次开发。

定位

一套统一前端组件，一站式预览206+种文件扩展名，覆盖办公、图纸、代码、媒体、压缩包、3D、电子书等全业务文件；底层基于纯TS内核，完全脱离后端转码、无需服务端生成临时文件，适配内网、离线私有化场景。

对比传统预览方案

100%纯前端渲染
文件解析、解码、渲染全部在浏览器Worker/WASM执行，不消耗服务器算力，无转码排队延迟；内网/离线环境可完全断网使用，文件数据不经过后端中转，数据安全性更高。
模块化按需加载
内核与各格式渲染器拆分为独立NPM包，只引入业务需要的格式引擎，避免大包体积臃肿，首屏加载更快。
全技术栈兼容
原生JS、Vue2.6/2.7/Vue3、React、jQuery、Svelte、iframe嵌入、Docker独立部署全覆盖，一套预览逻辑多框架复用。
私有化可控
支持静态资源部署、Docker镜像、自托管WASM字体，适配政务、国企内网严格CSP、无外网环境。
高保真Office渲染
自研Excel渲染引擎，完美还原合并单元格、图表、图片、条件格式；Word/PPT样式、字体、排版还原度远超同类前端预览库。

适用业务场景

企业OA、合同管理系统、电子发票平台（OFD+Office预览）
网盘、云文档、NAS私有云（全格式离线预览）
建筑/制造工程管理系统（CAD图纸在线查看）
研发后台、代码仓库、日志平台（代码高亮、日志预览）
政务内网、涉密管理平台（纯前端、无后端中转、可断网）
教学系统、在线文档平台（PPT/Word/电子书预览）

官方资源地址

在线Demo：https://demo.file-viewer.app
完整文档：https://doc.file-viewer.app
GitHub仓库：https://github.com/flyfish-dev/file-viewer
官网：https://flyfish.group

支持文件格式

206+后缀，24条独立预览链路

1. 办公文档（企业核心）

Word：.doc / .docx
Excel：.xls / .xlsx / .xlsm（支持图表、批注、合并单元格）
PPT：.ppt / .pptx
国产标准：OFD（电子发票、公文必备）
排版文档：PDF、Typst

2. 工程图纸类（工业/建筑系统刚需）

DWG、DXF、DWF、DWFx、CAD图纸、XPS图纸，支持图纸缩放、图层查看、测量基础能力。

3. 代码/文本类

Markdown、各类编程语言源码（JS/Java/Python/C++等语法高亮）、TXT、CSV、日志文件、JSON/XML结构化数据。

4. 媒体资源

图片（JPG/PNG/GIF/WebP/PSD）、音视频（MP4/MP3等浏览器原生支持格式）。

5. 其他专业格式

压缩包：ZIP/RAR/7Z/GZ（直接在线解压预览内部文件）
电子书：EPUB、UMD
设计文件：draw.io、Excalidraw
3D模型、邮件EML、字体文件

整体技术架构（分层模块化设计）

整体三层解耦架构，框架无关内核，易扩展维护：

底层核心 @file-viewer/core
统一能力底座：文件格式识别、资源调度、生命周期管理、全局API（搜索、缩放、水印、打印、导出）、主题、权限拦截钩子。
分层渲染器 @file-viewer/renderer-*
每个文件大类独立渲染包：renderer-office、renderer-pdf、renderer-cad、renderer-media等，按需引入，互不耦合。
上层框架适配层
轻量封装层，分别提供Vue3/Vue2/React/原生JS包，对外暴露统一配置参数，业务接入成本极低。

内置通用功能（开箱即用）

基础浏览交互
缩放、翻页、全屏、页面缩略图侧边栏、文档内全文搜索+关键词高亮、跳转指定页码。
企业级水印
全局文字水印、图片水印、自定义水印透明度、位置，防止文件截图泄露。
导出与打印
浏览器直接打印预览内容、导出HTML离线文件。
权限控制钩子
beforeOperation拦截下载、打印、复制等操作，适配内网权限管控场景。
双主题切换
亮色/暗黑模式，适配后台管理系统夜间模式。
文件对比
内置双文档分屏对比Demo，可用于合同、版本文件差异查看。
工具栏自定义
控制工具栏位置、隐藏/显示按钮、自定义按钮文案。

多种接入部署方式

1. NPM包集成（主流开发项目）

Vue3：@file-viewer/vue3
Vue2.7：@file-viewer/vue2.7（历史别名@flyfish-group/file-viewer）
React：@file-viewer/react
原生JS无框架：@file-viewer/web-full

2. CDN直接引入（老旧系统、无构建项目）

通过script标签引入IIFE全量包，页面直接使用<flyfish-file-viewer>自定义标签，无需打包工具。

3. Iframe嵌入（微前端、第三方系统嵌入）

单独部署预览静态页面，通过iframe地址传入文件URL，零侵入原有业务代码。

4. Docker独立服务部署（NAS、内网统一预览站点）

官方提供x86/arm64多架构镜像，单命令启动独立预览服务，网盘、NAS配套使用，无需改造原有系统。

5. 静态资源私有化部署

下载静态资源包放置内网服务器，完全切断外网依赖，适配等保合规要求。

开源与商业授权体系

开源免费版（Apache-2.0）
GitHub公开仓库：github.com/flyfish-dev/file-viewer，NPM包免费下载，允许企业内部商用、二次开发；仅要求保留版权来源声明，无功能阉割。
企业商业增强版
付费授权：完整源码、CAD/3D高级解析、定制化渲染引擎、专属技术支持、去水印、私有化部署陪跑、特殊格式扩展开发服务，面向政务、大型工业项目。

方案	是否需要后端转码	Office还原度	CAD支持	内网离线	多框架兼容
Flyfish Viewer	不需要	极高	原生支持	完全支持	Vue/React/原生JS全兼容
PDF.js	仅PDF	无Office能力	不支持	仅PDF可用	原生JS，框架适配差
后端转码服务（OnlyOffice等）	必须服务端	高	不支持	依赖服务	接入复杂，消耗服务器资源
其他前端预览组件	部分需要后端	Excel样式丢失严重	大多不支持	受限	仅单一Vue框架

Flyfish Viewer飞鱼文件预览组件

介绍

定位