文章目录
- 一个纯前端文档预览器，终于全能了
-
- 一个纯前端文档预览器，终于全能了
- 从"能打开"到"愿意用"
- [59 种格式，一眼看清覆盖范围](#59 种格式，一眼看清覆盖范围)
- [Vue2 与 Vue3，都可以拥有同一套体验](#Vue2 与 Vue3，都可以拥有同一套体验)
- 按需加载，不把沉重留给首屏
- 文档站也一起更新了
- 它适合解决什么问题
- 完全开源，也欢迎一起把它做得更好
一个纯前端文档预览器，终于全能了
一个纯前端文档预览器，终于全能了
很多后台系统，都会在某一天遇到同一个问题。
合同要预览，发票要预览，图纸要预览，报表要预览，研发同事传来的代码片段也要预览。业务侧希望用户点开就能看，研发侧却常常要在各种格式之间辗转：PDF 一套方案，Word 一套方案，Excel 一套方案，OFD 又是一套方案。
于是，文件预览这件看似细小的事情，慢慢变成系统里一块不愿反复触碰的石头。
这一次，Flyfish Viewer 做了一次完整更新。目标很简单，也很奢侈：
在 Vue 项目里，用纯前端方式，尽可能优雅地预览更多业务文件。
它现在覆盖 59 种文件格式，同时支持 Vue2.7 与 Vue3，包含 Office、PDF、OFD、CAD、Markdown、代码高亮、图片、视频等常见附件场景。更重要的是，它不要求你先搭一套后端转换服务，也不要求每个业务系统为附件预览重新铺一条路。
从"能打开"到"愿意用"
文件预览真正的难处，不在于让某个格式勉强显示出来。
难的是：它要出现在真实的业务系统里，接受真实用户的眼光。页面不能被挤压得无处阅读，按钮不能像临时拼上去的零件，示例文件不能藏在冗长的下拉列表里，文档站也不能让第一次接入的人四处寻找答案。
这次更新，几乎就是围绕这些细节慢慢铺开的。
最初，先把第三方依赖整体升级到新版本。依赖升级像整理一座旧仓库，表面看只是把箱子换新，里面却会牵动很多原本安静工作的零件。PDF、Word、表格、代码高亮、OFD、CAD，每一条预览链路都需要重新确认。
OFD 的过程尤其曲折。中间试过不同方案，最后还是回到 DLTech21/ofd.js 这条链路，并针对浏览器端使用做了适配。OFD 文件在电子发票、政企文书、归档材料里越来越常见，它不应该永远是系统里的例外项。
PDF 也经历了一轮重新审视。加入导航窗格以后，文档区域一度被挤得非常难受，页面宽度不足时更是几乎看不到正文。后来让 PDF 根据当前视图宽度自动选择更合适的默认缩放，让用户打开文件时先看到一张舒展的页面，再决定是否放大、缩小、翻页或隐藏导航窗格。
Word 视图也不只是"把内容排出来"。过去页面风格丢失时，文档会变得像网页正文，缺少纸张的轮廓与阅读的仪式感。现在它重新回到更接近文档本身的样子：白色纸张，灰色页面底，清晰的版式，保留用户熟悉的阅读气息。
代码文件 则选择了轻量的高亮方案。它不负责运行代码，也不把 HTML 当作可执行页面，而是让日志、配置、脚本、TypeScript、Vue 单文件组件、SQL 等内容可以被快速、安全地浏览。
CAD 图纸 也加入了预览入口。对于工程资料、设备附件、设计沟通场景来说，能够直接在浏览器中看到图纸轮廓，已经足以减少大量下载、转换、传来传去的时间。
59 种格式，一眼看清覆盖范围
这次更新最想让大家一眼看明白的，是它究竟能预览什么。
文档
doc、docx、pdf、ofd
适合合同、制度、报告、标书、电子发票、公文归档等场景。
表格
xlsx、xlsm、xlsb、xls、csv、ods、fods、numbers
适合台账、清单、导入模板、业务报表、轻量数据交换。
演示文稿
pptx
适合方案材料、培训课件、产品介绍、项目汇报。
图纸
dxf、dwg
适合工程附件、设计文件、设备资料与图纸流转。
Markdown
md、markdown
适合说明文档、知识库、研发记录、项目资料。
图片
gif、jpg、jpeg、bmp、tiff、tif、png、svg、webp
适合证照、截图、扫描件、素材预览和多种图片归档。
代码与文本
txt、json、js、mjs、cjs、css、java、py、html、htm、jsx、ts、tsx、xml、log、vue、yaml、yml、ini、sh、bash、sql、go、rs、php、c、cpp、cc、h、hpp、cs、diff
适合配置文件、日志、接口样例、脚本、源码归档和研发协作。
视频
mp4
适合培训视频、巡检记录、演示片段和业务附件播放。
这些格式不是写在清单里好看的名字，而是放进了示例文件列表中。新的示例选择器按文件类型分组，采用网格布局，支持折叠与单组展开。用户不需要在长长的下拉框里寻找某个文件，打开页面就能按类别定位。
Vue2 与 Vue3，都可以拥有同一套体验
很多项目不是从一张白纸开始的。有些系统已经在 Vue2 上运行多年，它们稳定地承载着业务；有些新项目正在拥抱 Vue3，希望更轻盈、更现代。Flyfish Viewer 这次把两条线都照顾到了。
Vue3 项目使用：
bash
pnpm add @flyfish-group/file-viewer3Vue2.7 项目使用：
bash
pnpm add @flyfish-group/file-viewer两个版本都已经发布到 1.0.7。能力、示例、文档、预览体验尽量保持一致。你可以在新项目里直接使用 Vue3 版本，也可以在旧系统里选择 Vue2.7 版本；如果希望多个系统共享同一个预览器，还可以把在线预览页面作为 iframe 嵌入。
这意味着，文件预览不再需要跟随每个业务项目重复建设。它可以像一个独立的基础能力，被多个系统安静地复用。
按需加载，不把沉重留给首屏
全能并不等于笨重。
OFD、CAD、PDF、Office、Markdown、代码高亮这些能力都采用按需加载的异步组件。用户打开 Word 时，不需要先为 CAD 付出等待；用户看代码时，也不必让 PDF 解析器提前入场。
这种设计让它更适合放进后台系统、门户系统、数据平台、知识库、工单系统、资产管理系统、档案系统等页面中。页面里的附件类型越复杂，这种统一入口的价值越明显。
文档站也一起更新了
组件更新以后，文档如果仍停留在旧页面，接入者会很快迷路。所以这次同步更新了：
- 官方文档与组件主页：https://doc.flyfish.dev
- 在线体验站点：https://viewer.flyfish.dev
- Vue3 npm 包 ：
@flyfish-group/file-viewer3@1.0.7 - Vue2.7 npm 包 ：
@flyfish-group/file-viewer@1.0.7 - 公开成品仓库：https://github.com/flyfish-dev/file-viewer
README、文档站、代码注释、示例元数据也一起补齐了指引。你从任何入口进来，都能看见一致的路线。
它适合解决什么问题
如果你的系统里有这些场景，Flyfish Viewer 会很合适：
- 客户上传合同、发票、报表，需要在线查看
- 管理后台里附件格式繁多，不希望每种文件单独找方案
- 旧系统使用 Vue2，新系统使用 Vue3，希望预览体验保持一致
- 不想搭建 Office 转换服务，希望尽量在浏览器端完成预览
- 希望文档、图纸、源码、图片、视频都通过同一个入口呈现
- 希望把预览器独立部署，再通过 iframe 提供给多个系统复用
它不是为了炫耀格式数量，而是为了减少那些反复出现的小麻烦：下载、转换、打不开、看不清、样式丢失、代码没有高亮、PDF 页面被挤压、OFD 无处安放。
当这些细碎的问题被收拢在一个组件里，业务系统就会显得从容许多。
完全开源，也欢迎一起把它做得更好
Flyfish Viewer 遵循开源协议，公开成品、文档和使用方式都已经开放。二开或商用时，请保留许可证、版权与来源说明，并注明项目来源为 Flyfish Viewer。
如果你需要完整源码、二次开发包以及后续仓库更新，可以前往：