文章目录一个纯前端文档预览器终于全能了一个纯前端文档预览器终于全能了从能打开到愿意用59 种格式一眼看清覆盖范围文档表格演示文稿图纸Markdown图片代码与文本视频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适合工程附件、设计文件、设备资料与图纸流转。Markdownmd、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 项目使用pnpmaddflyfish-group/file-viewer3Vue2.7 项目使用pnpmaddflyfish-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.devVue3 npm 包flyfish-group/file-viewer31.0.7Vue2.7 npm 包flyfish-group/file-viewer1.0.7公开成品仓库https://github.com/flyfish-dev/file-viewerREADME、文档站、代码注释、示例元数据也一起补齐了指引。你从任何入口进来都能看见一致的路线。它适合解决什么问题如果你的系统里有这些场景Flyfish Viewer 会很合适客户上传合同、发票、报表需要在线查看管理后台里附件格式繁多不希望每种文件单独找方案旧系统使用 Vue2新系统使用 Vue3希望预览体验保持一致不想搭建 Office 转换服务希望尽量在浏览器端完成预览希望文档、图纸、源码、图片、视频都通过同一个入口呈现希望把预览器独立部署再通过 iframe 提供给多个系统复用它不是为了炫耀格式数量而是为了减少那些反复出现的小麻烦下载、转换、打不开、看不清、样式丢失、代码没有高亮、PDF 页面被挤压、OFD 无处安放。当这些细碎的问题被收拢在一个组件里业务系统就会显得从容许多。完全开源也欢迎一起把它做得更好Flyfish Viewer 遵循开源协议公开成品、文档和使用方式都已经开放。二开或商用时请保留许可证、版权与来源说明并注明项目来源为 Flyfish Viewer。如果你需要完整源码、二次开发包以及后续仓库更新可以前往https://dev.flyfish.group/shop
纯前端文档预览器--全能文件预览
发布时间：2026/6/5 9:23:38
文章目录一个纯前端文档预览器终于全能了一个纯前端文档预览器终于全能了从能打开到愿意用59 种格式一眼看清覆盖范围文档表格演示文稿图纸Markdown图片代码与文本视频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适合工程附件、设计文件、设备资料与图纸流转。Markdownmd、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 项目使用pnpmaddflyfish-group/file-viewer3Vue2.7 项目使用pnpmaddflyfish-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.devVue3 npm 包flyfish-group/file-viewer31.0.7Vue2.7 npm 包flyfish-group/file-viewer1.0.7公开成品仓库https://github.com/flyfish-dev/file-viewerREADME、文档站、代码注释、示例元数据也一起补齐了指引。你从任何入口进来都能看见一致的路线。它适合解决什么问题如果你的系统里有这些场景Flyfish Viewer 会很合适客户上传合同、发票、报表需要在线查看管理后台里附件格式繁多不希望每种文件单独找方案旧系统使用 Vue2新系统使用 Vue3希望预览体验保持一致不想搭建 Office 转换服务希望尽量在浏览器端完成预览希望文档、图纸、源码、图片、视频都通过同一个入口呈现希望把预览器独立部署再通过 iframe 提供给多个系统复用它不是为了炫耀格式数量而是为了减少那些反复出现的小麻烦下载、转换、打不开、看不清、样式丢失、代码没有高亮、PDF 页面被挤压、OFD 无处安放。当这些细碎的问题被收拢在一个组件里业务系统就会显得从容许多。完全开源也欢迎一起把它做得更好Flyfish Viewer 遵循开源协议公开成品、文档和使用方式都已经开放。二开或商用时请保留许可证、版权与来源说明并注明项目来源为 Flyfish Viewer。如果你需要完整源码、二次开发包以及后续仓库更新可以前往https://dev.flyfish.group/shop
