文档导览
Start From The Right Door
Flyfish Viewer 官方文档同时承担组件主页、接入手册和成品交付说明。 文档围绕真实交付路径组织: 先确认支持格式和 Demo 表现，再选择 Vue3、Vue2、React、纯 JS 或 iframe 嵌入，最后了解安装、私有化部署和成品分发。
优秀之处
纯前端 Serverless
主要解析和渲染工作在浏览器完成，减少后端转码服务、临时文件和任务队列带来的维护成本。
覆盖真实附件场景
内置 149 个扩展名映射，覆盖 Office、PDF、OFD、Typst、压缩包、邮件、OLB/DRA、CAD、3D 模型、Excalidraw、draw.io、EPUB、UMD、Markdown、代码/文本、图片、音频和视频。
按需加载更轻
OFD、Typst、压缩包、邮件、OLB/DRA、CAD、3D 模型、绘图、PDF、Office、Markdown 和代码高亮链路按格式异步加载，避免所有解析器一次性进入首屏。
阅读体验更完整
Word 保留白色纸张和灰色页面底，PDF 支持缩放、导航窗格和宽度自适应，打开后默认就是可读状态。
推荐阅读顺序
先看 Demo
在线 Demo 和私有化 Demo 都提供按文件类型分组的样例文件盒子，点击样例即可打开并自动收起选择器，适合快速验收全部格式。
确认格式边界
支持格式页列出当前注册的 149 个扩展名、对应渲染链路和真实业务里的适用边界。
选择接入方式
Vue3 使用 @flyfish-group/file-viewer3，Vue2.7 使用 @flyfish-group/file-viewer，两个安装器都会自动带上样式；React 和纯 JS 包通过 iframe 复用 Vue3 基线产物，适合私有化部署和多系统复用。
准备发布分发
成品分发说明了 npm 包、私有化 viewer 静态产物、文档静态产物和公开成品仓库之间的交付关系。
当前重点能力
- Word 视图保留灰色页面底和白色纸张，
.docx会按当前可用宽度自适应缩放，长文档缺少显式分页时也会补足视觉分页。 - PPTX 视图增强组合图形坐标映射、旋转/翻转、主题背景、图片裁剪和 EMF 矢量图预览，更适合回看真实汇报模板。
- PDF 视图支持宽度自适应、缩放工具栏、页码状态和可显隐导航窗格；Word / PDF 打印使用专属完整页适配器，其他格式按能力动态显隐打印按钮。
- OFD 使用
DLTech21/ofd.js的浏览器端解析和渲染能力，并保持按需异步加载。 - 压缩包使用
libarchive.jsWorker 读取目录，点击内部文件后按需解压、缓存并继续复用统一预览器。 - EML / MSG 邮件支持头信息、HTML/文本正文、附件下载和附件继续预览。
- OLB / DRA 使用 CFB 容器解析、结构树、对象候选、属性和可读字符串索引，适合 EDA 附件初筛。
- CAD 支持 DXF 在线预览；DWG 会先尝试按 DXF 兼容解析，再提取内嵌预览图，无法完整解析几何时给出原因。
- 3D 模型走 Three.js，支持 GLTF/GLB、OBJ、STL、PLY、FBX、DAE、3DS、3MF、AMF、USD/USDZ、KMZ、PCD、VRML/WRL、XYZ、VTK/VTP 等常见浏览器渲染格式。
- Excalidraw 使用官方
@excalidraw/excalidraw导出 SVG，draw.io 使用官方 diagrams.net viewer。 - EPUB 使用
epubjs提供目录和滚动阅读，UMD 作为电子书格式解析目录和压缩正文，音频使用浏览器原生播放器打开。 - 代码和文本使用
highlight.js轻量高亮，HTML 会按源码展示。 - 独立文档比对入口
/compare.html支持两侧示例、URL、本地上传、交换、重置和同步滚动，适合上线前核对两份附件的视觉差异。
常用入口
| 你要做什么 | 推荐页面 |
|---|---|
| 想最快跑起来 | 快速开始 |
| 想确认所有格式 | 支持格式 |
| 想看示例文件和回归建议 | Demo 说明 |
| 想并排比对两份文件 | Demo 说明: 文档比对页 |
| 想在 Vue 3 中接入 | Vue3 集成 |
| 想在 Vue2.7 中接入 | Vue2 集成 |
| 想在 React 中接入 | React 集成 |
| 想在非框架页面中接入 | 纯 JS 集成 |
| 想让多个系统共用预览器 | Iframe 嵌入 |
| 想了解参数和事件 | 组件用法 |
| 想下载成品或二开 | 发布与成品分发 |
如果你只是想快速判断项目是否适合业务，建议先打开 viewer.flyfish.dev 或运行仓库内置 Demo，再用自己的真实附件补一轮回归。React 和纯 JS 组件默认仍只加载你私有部署的
/file-viewer/index.html。