文档导览
Start From The Right Door
Flyfish Viewer 官方文档同时承担组件主页、接入手册和成品交付说明。 文档围绕真实交付路径组织: 先确认支持格式和 Demo 表现,再选择 Vue3、Vue2 或 iframe 嵌入,最后了解安装和成品分发。
优秀之处
纯前端 Serverless
主要解析和渲染工作在浏览器完成,减少后端转码服务、临时文件和任务队列带来的维护成本。
覆盖真实附件场景
内置 74 个扩展名映射,覆盖 Office、PDF、OFD、CAD、Excalidraw、draw.io、EPUB、Markdown、代码/文本、图片、音频和视频。
按需加载更轻
OFD、CAD、绘图、PDF、Office、Markdown 和代码高亮链路按格式异步加载,避免所有解析器一次性进入首屏。
阅读体验更完整
Word 保留白色纸张和灰色页面底,PDF 支持缩放、导航窗格和宽度自适应,打开后默认就是可读状态。
推荐阅读顺序
先看 Demo
在线 Demo 提供按文件类型分组的样例文件盒子,点击样例即可打开并自动收起选择器,适合快速验收全部格式。
确认格式边界
支持格式页列出当前注册的 74 个扩展名、对应渲染链路和真实业务里的适用边界。
选择接入方式
Vue3 使用 @flyfish-group/file-viewer3,Vue2.7 使用 @flyfish-group/file-viewer;多系统复用、隔离依赖或带鉴权文件场景,优先考虑 iframe 嵌入。
准备发布分发
成品分发说明了 npm 包、在线 Demo、官方文档和公开成品仓库之间的交付关系。
当前重点能力
- Word 视图保留灰色页面底和白色纸张,
.docx会按当前可用宽度自适应缩放,长文档缺少显式分页时也会补足视觉分页。 - PPTX 视图增强组合图形坐标映射、旋转/翻转、主题背景、图片裁剪和 EMF 矢量图预览,更适合回看真实汇报模板。
- PDF 视图支持宽度自适应、缩放工具栏、页码状态和可显隐导航窗格。
- OFD 使用
DLTech21/ofd.js的浏览器端解析和渲染能力,并保持按需异步加载。 - CAD 支持 DXF 在线预览,DWG 作为兼容入口给出转换提示,避免引入不合适的运行时授权链路。
- Excalidraw 使用官方
@excalidraw/excalidraw导出 SVG,draw.io 使用官方 diagrams.net viewer。 - EPUB 使用
epubjs提供目录和滚动阅读,音频使用浏览器原生播放器打开。 - 代码和文本使用
highlight.js轻量高亮,HTML 和 UMD 都会按源码展示,不在预览器里执行。
常用入口
| 你要做什么 | 推荐页面 |
|---|---|
| 想最快跑起来 | 快速开始 |
| 想确认所有格式 | 支持格式 |
| 想看示例文件和回归建议 | Demo 说明 |
| 想在 Vue 3 中接入 | Vue3 集成 |
| 想在 Vue2.7 中接入 | Vue2 集成 |
| 想让多个系统共用预览器 | Iframe 嵌入 |
| 想了解参数和事件 | 组件用法 |
| 想下载成品或二开 | 发布与成品分发 |
如果你只是想快速判断项目是否适合业务,建议先打开 viewer.flyfish.dev,再用自己的真实附件补一轮回归。