Skip to content
Flyfish Viewer Docs

企业后台、内网和私有化系统里的纯前端文件预览。

Flyfish Viewer 是面向业务系统的浏览器端文件预览基础设施,无需服务端转码,覆盖办公文档、工程图纸、压缩包、邮件、电子书、代码、图片、音视频和结构化数据。文档站把能力矩阵、接入路径、模块化边界、离线部署和生产验证放在同一个入口,帮助团队快速评估、按需装配并稳定上线。

206扩展名映射
24预览链路
离线Worker / WASM / 字体自托管
按需preset 与 renderer 组合装配
preview platform
active documentPDF · DOCX · DWG · ZIP

按文件类型异步加载 renderer、worker、wasm 和离线 vendor 资源,避免首屏被全量能力拖慢。

SearchZoomPrintExport
Office fidelityEngineering CADArchive nested previewOffline assets
统一交互搜索、高亮、缩放、打印、导出、水印和生命周期钩子。
企业部署内网静态资源、Docker、Cloudflare Pages 和 Release 产物。
原生生态Vanilla JS、Vue、React、Svelte、jQuery 共享同一套 core。
Platform Capability

不只是展示文件,而是把预览链路做成可交付的前端能力。

从格式识别、渲染调度、资源加载、用户交互到部署分发,Flyfish Viewer 以模块化架构把复杂预览能力拆成可控制、可验证、可持续升级的能力单元。

多格式高还原

覆盖真实业务附件

PDF、Word、Excel、PPTX、OFD、Typst、CAD、DWF、PSD、Mermaid、PlantUML、压缩包内嵌预览等能力按模块维护。

按需与性能

命中文件才加载重型依赖

renderer、worker、wasm、字体和 vendor 资源分层加载,IIFE full 入口也不会把全部能力压进首个脚本。

交互一致性

预览器级操作统一

搜索定位、缩放、打印、导出、下载、水印、工具栏权限和生命周期回调保持一致,减少业务侧重复适配。

样式隔离

宿主 CSS 不再轻易污染预览区

Web Component / IIFE 默认 Shadow DOM;框架组件可通过 styleIsolation 开启隔离,并用 tokens 与 ::part() 定制。

企业化部署

公网、内网和离线都能落地

Worker/WASM/字体资源可自托管,支持 Docker、静态站点、Cloudflare Pages、Release 包和私有 CDN。

Live Experience

先看真实预览,再决定接入范围。

Demo 使用真实样例、按需 renderer、移动端布局、文档比对和离线资源路径,适合直接验证业务场景。

Install Strategy

先选组件,再选能力。避免把全量格式一次塞进业务页。

生产项目优先从轻量组件包开始,再按业务选择 preset 或单 renderer。preset-all 覆盖最完整,但体积最大,更适合完整文件工作台或内部验证环境。

轻附件

@file-viewer/preset-lite

图片、文本、Markdown、代码、媒体等常见轻量附件。

办公文档

@file-viewer/preset-office

PDF、Word、Excel、PowerPoint、OFD、RTF 和 OpenDocument 办公链路。

工程资料

@file-viewer/preset-engineering

CAD、EDA、3D、地理数据、绘图和结构化工程文件。

完整工作台

@file-viewer/preset-all

全格式体验与验收场景使用。业务端建议评估体量后再引入。

安装边界: 只安装 @file-viewer/vue3@file-viewer/react@file-viewer/web 是最轻的组件接入方式,但不会自动带入全部格式能力。需要预览文件时,请安装对应 preset 或 renderer。
全量一键: 重度用户、内部附件中心或验收环境可以直接安装 @file-viewer/preset-all,再使用同一份 fileViewerRenderers({ copyAssets:true }) 配置,最快获得官方 Demo 的完整格式能力。
pnpm add @file-viewer/vue3 @file-viewer/preset-all
pnpm add -D @file-viewer/vite-plugin # Vite 项目可选
Native Ecosystem

每个技术栈都有原生组件,不以 iframe 作为核心路径。

所有生态组件共享 core 能力、options、事件、搜索、缩放、打印、导出和生命周期钩子,同时保持各框架自己的接入方式。

Format Matrix

覆盖业务附件的主流类型,也保留可扩展边界。

核心格式按模块维护,重型解析库、worker、wasm 和离线 vendor 资源仅在命中文件类型时加载。

OfficeDOCX / XLSX / PPTX / PDF / OFD / Typst
EngineeringDWG / DXF / DWF / 3D / GIS / EDA / OLB / DRA
KnowledgeMarkdown / Code / Git patch / Git bundle / Mermaid / PlantUML
AssetsPSD / Images / HEIC / Audio / Video / Fonts / SQLite / Parquet
ContainersZIP / RAR / 7Z / TAR / GZIP and nested preview
CollaborationEML / MSG / XMind / draw.io / Excalidraw / EPUB / UMD
Delivery

面向内网、私有化和开源分发的完整交付链路。

文档站、Demo、官网、npm 包、Docker 镜像、GitHub 开源总仓库和 Release 产物同步维护。需要更高还原度和极致性能的商业版,可从官网进入商业版说明与支持入口。

Released under the Apache-2.0 License.