前端们吃得是真好一个组件拿到 206 种文件预览能力最近整理前端开源项目时看到 File Viewer 最新版我的第一反应是现在前端们吃得是真好。以前后台附件预览常见的画风是PDF 先凑合Word 下载看CAD 请隔壁同事装软件压缩包点开再说邮件附件一路套娃。到了这里思路突然清爽很多一个组件、一套 API把文件预览这件事尽量放回浏览器里完成。File Viewer 当前开源版是 2.1.12采用 Apache-2.0 协议支持商用、二开、企业内部集成和私有化部署。它面向真实业务里的附件中心、OA、知识库、合同系统、工单系统、档案系统和工程资料平台当前内置 206 个扩展名映射覆盖 24 条预览链路。项目地址Github搜索 file-viewer在线 Demohttps://demo.file-viewer.app先看一眼官网官网这次也做成了一个比较完整的入口支持矩阵、在线体验、生态组件、文档、部署分发都能直接找到。对第一次接触的同学来说最重要的信息很清楚关键词含义纯前端浏览器内解析和渲染尽量减少服务端转换依赖完全开源Apache-2.0 协议支持商用和二开模块化core、renderer、preset、生态组件分层按需加载命中 PDF、Office、CAD、压缩包等格式时再加载重型能力多生态Vanilla JS、Web Component、Vue、React、Svelte、jQuery 都有入口一行代码一个预览器如果想先快速跑起来直接用 full 包即可。以 Vue 3 为例pnpmaddfile-viewer/vue3-fullscriptsetuplangtsimportFileViewerfromfile-viewer/vue3-full/scripttemplateFileViewerurl/files/contract.docxstyleheight:720px//template纯 JS 或传统后台页面也可以走 Web Componentscriptsrc/vendor/file-viewer/flyfish-file-viewer-web-full.iife.js/scriptflyfish-file-viewersrc/files/report.pdfthemelighttoolbar-positionbottom-rightstyledisplay:block;height:720px/flyfish-file-viewer如果项目更在意体积也可以安装轻量组件包再按业务场景组合 presetpnpmaddfile-viewer/react file-viewer/preset-officeimportFileViewerfromfile-viewer/reactimport{officePreset}fromfile-viewer/preset-officeexportfunctionAttachmentPreview(){return(FileViewer url/files/report.pdfoptions{{preset:officePreset,theme:light,toolbar:{position:bottom-right},}}style{{height:720}}/)}有鉴权文件、无扩展名下载接口、Blob 或 ArrayBuffer也能正常处理。关键点是给文件补上可信的文件名让预览器能判断该走哪条渲染链路constresponseawaitfetch(/api/files/42/download,{headers:{Authorization:Bearer${token},},})constblobawaitresponse.blob()constfilenewFile([blob],quarter-report.xlsx,{type:blob.type,})viewer.open({file})206 种格式能力按业务场景拆开看说“支持很多格式”太轻飘了File Viewer 更有价值的地方在于它把不同文件的渲染链路拆清楚了。类别典型格式渲染链路与适用场景Officedocx、doc、xlsx、xls、pptx、pptm、odt、rtf合同、公文、报表、演示材料、历史 Office 附件PDF / OFD / Typstpdf、ofd、typ合同、票据、电子发票、技术文档、Typst 源文件预览CAD / 工程dwg、dxf、dwf、dwfx、gds、olb、dra工程图纸、EDA 结构、资料归档初筛压缩包zip、7z、rar、tar、gz、xz、iso、jar、apk查看压缩包目录按需解压内部文件并继续预览邮件eml、msg、mbox邮件归档、工单邮件、附件下载与附件预览绘图 / 思维导图drawio、excalidraw、mermaid、plantuml、xmind流程图、架构图、协作白板、知识库图谱媒体 / 设计 / 数据图片、音频、视频、psd、sqlite、parquet、font、wasm设计稿确认、数据资产查看、媒体附件浏览代码 / 文本md、txt、json、xml、yaml、diff、patch技术文档、配置文件、代码片段和变更对比完整矩阵可以在文档站查看。下面这些图更直观。Word、PPT、CAD业务里真的会遇到Word 预览使用自研文档渲染链路偏向连续阅读、目录字段缓存、复杂表格和中文正式文档的可读性。对于后台系统和知识库来说用户能直接看正文、表格和样式体验会比“下载后再打开”顺很多。PPTX 由独立开源的file-viewer/pptx承接支持按页输出、缩放、打印和导出。适合课件、方案、汇报材料、产品介绍这类内容预览。CAD 链路接入自研flyfish-dev/cad-viewer面向 DWG、DXF、DWF、DWFX 等格式。工程资料系统里常见的“先看一眼图纸内容、判断是否为目标文件”这类需求就很适合放在浏览器里完成。压缩包和邮件附件套娃也能拆开看压缩包预览会先展示目录用户点击内部文件后再按需解压并继续交给统一预览器渲染。这样既照顾内存安全也避免打开一个大压缩包时把所有内容一次性塞进页面。邮件格式支持 EML、MSG、MBOX能展示头信息、HTML/文本正文、附件下载和附件预览。对工单、客服、邮件归档系统来说这块能力很实用。文档比对、搜索、定位也在同一套体系里除了单文件预览项目还提供了独立文档比对页面。左右并排、同步滚动、搜索高亮、定位切换这些能力适合合同修订、版本审阅、资料校对等场景。通用操作能力也比较完整能力说明搜索与高亮支持命中高亮、上一个、下一个、定位到结果缩放统一放大、缩小、还原比例各渲染链路按内部能力适配打印按可打印类型动态显示尽量打印主体内容导出支持下载原文件、导出渲染后的 HTML水印支持文字或图片水印适合合同、档案、内网系统生命周期加载开始、加载完成、卸载开始、卸载完成等回调前置校验下载、打印、导出等操作可做权限确认主题可指定 light / dark / auto避免跟随系统主题导致业务 UI 不一致按需加载体积和能力可以同时兼顾File Viewer 的结构分得比较细层级作用file-viewer/core框架无关的格式识别、资源加载、生命周期、搜索、缩放、打印、导出和 controller APIfile-viewer/renderer-*PDF、Word、Excel、CAD、Archive、Email、Drawing 等独立渲染器file-viewer/preset-*lite、office、engineering、all 等能力组合包file-viewer/vue3 / react / web 等各生态原生组件file-viewer/*-full组件加全量 preset适合快速验证和完整附件中心这套拆法带来的好处很实际小系统可以只装轻量包OA、合同、档案系统可以装 office preset工程资料平台可以叠 engineering preset想最快看到完整效果就用 full 包。再看一些边界更宽的示例这些示例能看出 File Viewer 更像一个浏览器端文件预览工具箱。它追求的是把业务系统里常见、零散、难统一的附件预览能力整理到一套组件生态里并且尽量保留扩展空间。当然复杂文件预览永远离不开真实样本。比如非常复杂的 Office 特效、历史版本 CAD、超大 Excel、特殊编码文本、内网 WebView、严格 CSP 和 Worker/WASM 路径这些都需要在业务环境里继续打磨。项目欢迎大家拿脱敏文件试一试遇到问题直接提 issue样本越真实兼容性越能往前走。适合哪些团队试一试场景可以先试的能力OA / 审批 / 合同系统Word、PDF、OFD、Excel、打印、水印、权限前置校验知识库 / 附件中心Markdown、代码、Office、PDF、搜索定位、文档比对工单 / 客服系统邮件、图片、压缩包、附件内文件预览工程资料系统CAD、DWF、DXF、3D、EDA、压缩包私有化项目Docker、静态部署、Worker/WASM 自托管、离线资产低代码 / SaaS 平台Web Component、React、Vue、统一 options 和 controller最后感谢大家的真实反馈File Viewer 已经全面开源协议是 Apache-2.0。你可以把它用于商业项目、内部系统、二次开发和私有化部署。项目能走到现在很大一部分来自真实用户反馈某个 Word 目录乱了、某个 DWG 缩成一团、某个压缩包在手机 WebView 卡住、某个 PDF 工具栏挤到了正文。每个具体问题最后都会变成更靠谱的预览体验。如果这个项目刚好对你有帮助欢迎动动小手去 GitHub 点个小星星也欢迎提交 issue、PR、脱敏样本和使用建议。GitHubfile-viewer在线 Demohttps://demo.file-viewer.app希望它能让更多前端在处理附件预览时少一点“我先下载看看”多一点“页面里直接打开”。