【开源自荐】File Viewer：浏览器原生的企业文件预览组件

[wybaby168]

项目名称

File Viewer

项目地址

https://github.com/flyfish-dev/file-viewer

在线体验 / 文档

• 在线 Demo：https://demo.file-viewer.app
• 文档：https://doc.file-viewer.app
• 官网：https://file-viewer.app

项目简介

File Viewer 是一个面向企业后台、OA、知识库、工单系统和私有化项目的纯前端文件预览组件。它尽量不依赖服务端转码，在浏览器里直接预览常见业务附件，并提供 Vanilla JS、Web Component、Vue 3 / Vue 2、React、Svelte、jQuery 等组件包，以及 full 包和 preset 按需组合能力。

推荐原因

• 纯前端和离线优先：浏览器内解析和渲染，Worker、WASM、字体、vendor 资源都支持自托管，适合私有 CDN、Docker、内网部署。
• 覆盖业务文件较多：内置 206 个扩展名映射和 24 条预览链路，覆盖 Office、PDF/OFD、Typst、CAD、压缩包、邮件、图片、音视频、代码、Markdown、Patch、Git bundle、XMind、Draw.io、PSD、3D、Geo 等。
• 多框架组件生态：Vanilla JS、Web Component、Vue 3 / Vue 2、React、Svelte、jQuery 都有原生组件，参数、事件和 controller API 尽量保持一致。
• 按需加载：PDF、Office、CAD、Typst、压缩包、绘图等重型 renderer 只在命中文件类型时加载，避免首包过大。
• 贴近企业附件中心：比较关注 Word / Excel / PDF / OFD 发票、DWG / DXF 图纸、压缩包内文件、EML / MSG 邮件附件这类真实业务场景。

快速开始

npm i @file-viewer/vue3-full

<file-viewer url="/files/report.docx" />

截图

适合分类

前端组件 / 文件预览 / Office Viewer / PDF Viewer / CAD Viewer / 私有化部署 / 离线优先

License

Apache-2.0