File Viewer：浏览器原生的企业文件预览组件

wybaby168

大家好，自荐一个自己维护的开源项目：File Viewer。如果版块不合适，请版主帮忙移动或提醒我调整。

先说明一下：我是刚注册的新鱼油，当前用户组还不能发外链和网络图片，所以这里先不贴 GitHub / Demo / 文档链接。感兴趣的朋友可以在 GitHub 搜索仓库名：

1. 
   
2. file-viewer
   

复制代码

这个项目解决什么问题？

很多企业后台、OA、知识库、工单系统、档案系统、工程协同平台里，都有一个很常见的需求：用户上传了附件，希望能在网页里直接预览。

但实际落地时会遇到几个问题：

• 文件不方便上传到第三方在线转换服务
• 内网或私有化环境不能依赖公网资源
• Office、PDF、OFD、CAD、压缩包、邮件、代码等格式入口分散
• Vue、React、Web Component、jQuery 等项目都要能接
• Worker、WASM、字体和大体积依赖需要能本地部署
  

File Viewer 的目标就是做一套浏览器原生、离线优先、适合业务系统集成的文件预览组件。

简单结构图

1. 
   
2. 业务附件
   
3.   ├─ Word / Excel / PPT
   
4.   ├─ PDF / OFD / Typst
   
5.   ├─ DWG / DXF / DWF 等工程图纸
   
6.   ├─ ZIP / RAR / 7z 等压缩包
   
7.   ├─ EML / MSG 邮件和附件
   
8.   └─ 图片 / 音视频 / 代码 / Markdown / XMind / Draw.io 等
   
9.         ↓
   
10. File Viewer Core
    
11.         ↓
    
12. 按格式懒加载 renderer / worker / wasm
    
13.         ↓
    
14. Web Component / Vue / React / Svelte / jQuery 等组件接入
    
15.         ↓
    
16. 浏览器内预览，尽量不依赖服务端转码
    

复制代码

目前比较核心的特点

• 纯前端和离线优先：资源可以自托管，适合内网、Docker、私有 CDN
• 多生态组件：Vanilla JS、Web Component、Vue 3 / Vue 2、React、Svelte、jQuery
• 轻量包、preset 组合包和 full 包三种接入方式
• 重型能力按需加载，避免所有格式一次性塞进首包
• 内置 206 个扩展名映射和 24 条预览链路，覆盖常见办公、工程、设计、数据和代码附件
• 统一 API：主题、工具栏、搜索、缩放、打印、下载、水印、生命周期钩子等尽量走同一套配置
  

Vue 3 快速接入示例

1. 
   
2. npm i @file-viewer/vue3-full
   

复制代码

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

复制代码

Vanilla JS 也可以这样接

1. 
   
2. npm i @file-viewer/web @file-viewer/preset-all
   

复制代码

1. 
   
2. import { mountViewer } from '@file-viewer/web'
   
3. import presetAll from '@file-viewer/preset-all'
   
4. 
   
5. mountViewer(document.querySelector('#viewer'), {
   
6.   url: '/files/report.pdf',
   
7.   options: { preset: presetAll, theme: 'light' }
   
8. })
   

复制代码

适合谁看？

• 正在做后台管理系统、OA、知识库、工单系统、附件中心的前端同学
• 需要在内网预览 Word、Excel、PDF、OFD 发票、CAD 图纸的团队
• 想了解一个文件预览组件如何拆 core、renderer、preset、framework component 的同学
• 对 worker / wasm / 离线资产 / 私有化部署感兴趣的朋友
  

项目还在持续打磨，尤其是文档格式兼容、移动端体验、内网资源路径、worker/wasm 自托管这些地方，很需要真实场景反馈。

如果鱼C的朋友手里有不涉密、可脱敏的 DOC / XLS / PPT / PDF / OFD / DWG / DWF / 压缩包 / 邮件样本，欢迎拿去试试。遇到打不开、样式不一致、部署路径问题或移动端异常，可以在仓库 issue 里反馈，我会尽量做成可复现的验证脚本再修。

谢谢大家。