纯前端文档预览器--全能文件预览

一个纯前端文档预览器，终于全能了

一个纯前端文档预览器，终于全能了

很多后台系统，都会在某一天遇到同一个问题。

合同要预览，发票要预览，图纸要预览，报表要预览，研发同事传来的代码片段也要预览。业务侧希望用户点开就能看，研发侧却常常要在各种格式之间辗转：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 项目使用：

pnpmadd@flyfish-group/file-viewer3

Vue2.7 项目使用：

pnpmadd@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。

如果你需要完整源码、二次开发包以及后续仓库更新，可以前往：

https://dev.flyfish.group/shop