Skip to content
Official Docs And Component Home

Flyfish Viewer

纯前端多格式文件预览组件。把 Word、Excel、PPT、PDF、OFD、CAD、Excalidraw、draw.io、EPUB、Markdown、代码、图片、音频和视频预览能力放进浏览器端, 同时提供 Vue3、Vue2.7 和 iframe 三种集成路径。

74个扩展名映射
14条预览链路
Vue2/3双包线同步维护
Iframe支持多系统复用
Product Experience

产品化的文件预览,而不是格式清单

文档解析、阅读布局、示例验收和分发交付被放在同一条链路里维护。接入前可以先看真实 Demo, 接入后也能通过 npm、静态站或 iframe 继续迭代。

Flyfish Viewer 在线预览器主界面
在线 Demo 包含示例文件选择器、上传入口和多格式预览区,可直接用于验收真实浏览体验。
01

打开即适配阅读宽度

PDF 和 Word 会按当前视口计算默认缩放,导航窗格开启时也尽量保留可读区域。

02

重型能力按需进入

OFD、CAD、绘图、EPUB、PDF、Office、Markdown、音频和代码高亮都拆成异步块,命中格式时再加载。

03

示例覆盖完整验收路径

示例文件按文档、表格、图纸、电子书、代码、媒体等类型分组,方便快速定位和回归。

Why It Works

为业务系统准备的工程取舍

它不是一个只展示单一 PDF 的小组件,而是一套面向附件中心、OA、知识库和工单系统的前端预览方案。

少一条服务端链路

大多数格式直接在浏览器完成解析,不需要把附件交给后端转 PDF,也减少临时文件和队列任务。

格式覆盖贴近业务

除了 Office、PDF 和图片,也补齐 OFD、DXF、Excalidraw、draw.io、EPUB、Markdown、代码、日志、配置文件、音频和 MP4;PPTX 对组合图形、主题背景和 EMF 图片做了专门增强。

阅读质感有兜底

Word 保留白色纸张和灰色页面底,PDF 具备缩放、页码、导航窗格和宽度自适应,PPTX 会尽量保留模板背景、组合元素和矢量插图。

接入边界清晰

Vue3、Vue2.7 和 iframe 都有明确示例,URL、File、Blob 转 File 等输入路径也已写明。

成品可直接下载

公开仓库提供混淆压缩库产物、Demo 静态站点、文档静态站点、样例文件和 tarball。

版本交付可追踪

README、文档站、Demo、npm 包和公开成品仓库同步维护,便于验收和分发。

Choose Your Path

按你的接入场景开始

先选路线,再进入对应文档。每条路线都给出最短示例和真实项目里的注意事项。

Official Resources

一个站点承担主页、文档和交付说明

官方文档是 doc.flyfish.dev, 在线预览是 viewer.flyfish.dev, 公开成品仓库是 github.com/flyfish-dev/file-viewer

进入文档导览

Released under the Apache-2.0 License.