Skip to content

文档导览

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,再用自己的真实附件补一轮回归。

Released under the Apache-2.0 License.