Vue3 Office 预览神器杀疯了!最难搞的 doc / xls 终于支持!

大家好，我是 xy。

前端做文件预览，图片、视频、PDF 其实都还好。

真正难搞的，一直是 Office。

尤其是企业后台、OA、ERP、档案系统，里面经常能翻出一堆老文件：

合同.doc报价.xls制度.docx财务.xlsx汇报.ppt演示.pptx历史文档.wps表格.et

很多 Office 预览库看着支持 Word、Excel，实际一测：

• docx ✅
• xlsx ✅
• doc ❌
• xls ❌

新项目可能感觉不到，一接老系统马上翻车。

所以最近我又狠狠干了一轮自己的开源项目：

Open File Viewer。

目前项目 GitHub 已经 1.7K+ Star、190 Fork，最新版本来到 v0.1.48。

这次我最想说的就一个：

doc / xls / ppt 这些老 Office 格式，也开始啃下来了。

为什么老 Office 这么难？

docx / xlsx / pptx 属于新版 Office 格式，底层主要是 XML + ZIP，前端已经有不少成熟解析方案。

老的 doc / xls / ppt 就麻烦多了。

它们大量使用二进制结构，里面还夹着图片、表格、分页、字体、图表、定位信息。

浏览器想直接解析，工作量非常大。

但真实业务又绕不开。

一个跑了十几年的 OA，里面几万份历史合同，不可能突然全部变成 docx。

用户更不会关心格式。

他只知道：

“这个 Word 怎么打不开？”

现在 Office 支持到哪了？

目前 officePlugin() 已经覆盖：

doc / docx / docm / rtf / odtxls / xlsx / xlsm / xlsb / csvppt / pps / pptx / pptm / odpwps / et / dps

其中我最看重的就是：

doc / xls / ppt。

旧版 DOC 已经有单独的二进制解析链路，可以处理正文、表格、分页和图片。

XLS 可以直接进入表格解析。

PPT / PPS 也有自己的旧版 PowerPoint 解析逻辑。

今天刚发布的 v0.1.48，还继续修了几处 Office 细节：

• 旧版 DOC 内嵌图片和版式
• DOCX 合并单元格边框
• Word 二进制分页
• Office 饼图标签和主题色

现在做的已经不只是“能打开”。

更多时间都花在：

怎么让它看起来更像原文件。

Vue3 接入很简单

安装：

pnpm add @open-file-viewer/core @open-file-viewer/vue

如果需要 PDF：

pnpm add pdfjs-dist

然后配置插件：

const plugins = [  imagePlugin(),  textPlugin(),  pdfPlugin({    workerSrc: pdfWorkerSrc  }),  officePlugin()];

页面直接：

<OpenFileViewer:file="file":plugins="plugins"width="100%"height="640px"toolbar/>

业务层不用再自己判断 Word、Excel、PDF、图片。

直接把文件丢进去，底层插件自动匹配。

不只支持 Vue

这个项目一开始就没想绑死某个框架。

核心能力都放在：

@open-file-viewer/core

上层再做不同框架的薄适配。

目前已经支持：

Vanilla JavaScriptVueReactSvelte

对应包分别是：

@open-file-viewer/core

@open-file-viewer/vue

@open-file-viewer/react

@open-file-viewer/svelte

所以你是 Vue3 项目可以直接接 Vue 版本，React、Svelte 也一样。

甚至不用框架，直接原生 JavaScript 也能用。

这一点对组件库、低代码平台或者多个技术栈并存的公司会比较舒服。

底层还是同一套预览能力，不需要每个框架重新造一遍。

已经覆盖 274 个扩展名

我重新统计了一下仓库里的格式测试矩阵。

目前已经覆盖 274 个扩展名。

除了 Office，还有：

PDF、OFD、EPUB、XPS、图片、音视频、压缩包、邮件、XMind、Draw.io、CAD、DWG、3D、GIS、PSD、AI……

当然，这不代表 274 个格式全部高保真渲染。

不同格式支持深度肯定不一样。

我更想解决的是：

不管什么文件进来，都走同一套预览流程。

能预览就预览，不能预览就统一 fallback，需要复杂解析就接专用引擎或者服务端转换。

这样文件预览才不会越做越碎。

Office 预览还有边界

浏览器端想 100% 复刻 Microsoft Office / WPS，基本不现实。

特殊字体、复杂页眉页脚、文本框、宏、修订、复杂 Excel 图表，都可能影响还原效果。

所以 Open File Viewer 也支持更稳的方案：

普通文件前端直接预览，复杂 Office 服务端转 PDF，再交给同一个 Viewer 展示。

前端入口不用换。

用户看到的还是同一套界面。

最后

Open File Viewer 从 6 月做到现在，很多时间其实都花在这些不起眼的细节上。

一个边框、一张图片、一个分页、一个十几年前的老 Word。

但真正做过后台系统的人应该知道：

这些才是文件预览最折磨人的地方。

如果你也在做 OA、ERP、审批、合同、知识库、网盘、档案系统，可以直接试试。

有问题欢迎提 Issue。

觉得项目有点用，也欢迎顺手点个 Star。

• 官网：https://open-file-viewer-workspace.void.app/
• GitHub：https://github.com/xushanpei/open-file-viewer
• npm Core：https://www.npmjs.com/package/@open-file-viewer/core
• npm Vue：https://www.npmjs.com/package/@open-file-viewer/vue
• npm React：https://www.npmjs.com/package/@open-file-viewer/react
• npm Svelte：https://www.npmjs.com/package/@open-file-viewer/svelte