纯前端 TypeScript、高还原、轻量部署、六大格式在线预览，90%以上还原度，完全免费试用。

不用服务器，也能像 Office 一样打开文档：office-preview-js 把 Word、PPT、Excel 带进浏览器

很多系统里，文件预览一直是一件看似普通、实际很难优雅完成的事。

OA 里的合同、CRM 里的客户方案、招投标平台里的演示文稿、档案系统里的历史 Word、数据看板旁边的 Excel 台账……用户只想点开看一眼，系统却常常要在服务器上排队转换、依赖 Office 或 LibreOffice、生成一堆临时 PDF，再把结果慢慢送回浏览器。

更麻烦的是，许多文档并不适合离开自己的业务系统。企业文件、项目资料、客户数据、财务表格，每一份都带着边界。它们需要被阅读，却不该被随意带走。

于是，我们做了 office-preview-js。

它想回答一个朴素但重要的问题：能不能不把文档交给服务器，也能在浏览器里把 Word、PowerPoint、Excel 尽可能原样地打开？

现在，这个答案已经清晰起来。

体验地址：https://demo.flyfish.group^[1]

完全免费试用。觉得合适，再按需联系客服部署，或开通源码。

一眼看到它能做什么

office-preview-js 是一套纯前端 Office 文档预览组件，使用 TypeScript 实现，面向真实业务系统里的文档阅读场景。

目前已经覆盖六类常见格式：

• Word：DOC、DOCX
• PowerPoint：PPT、PPTX
• Excel：XLS、XLSX

它可以作为独立 Demo 使用，也可以嵌入到已有系统中，通过上传、本地文件、样例文件或 URL 参数进入预览。你不需要额外准备一台转换服务器，也不需要让用户安装 Office、WPS 或浏览器插件。

更重要的是，它不是“把文件名显示出来”的轻体验，也不是只支持简单样式的预览玩具。它真正面对的是复杂文档：分页、表格、合并单元格、页眉页脚、图片、旧版演示稿、电子表格多工作表、行高、边框、长文本、移动端滚动，以及那些最容易在客户现场暴露问题的历史文件。

我们把目标定得很明确：在纯前端自研 Office 预览这个细分市场里，向市场第一的还原度看齐，并做出可以放到第一排接受检验的结果。

这条路，比想象中更曲折

一开始，我们也以为这是一件可以被“组件化”轻轻带过的事情。

后来，真实文档一份份出现，问题也一层层浮出水面。

有的 DOC 文档，扩展名写着 .doc，身体里却是 DOCX 的结构；有的旧版 PPT，背景是白色，文字也是白色，稍有不慎整页就像空白；有的流程图依赖嵌入对象，箭头和图片一旦遗漏，整张图的意思就变了；有的 Excel 表格，边框线少一条，行高低一点，长文本溢出一点，业务人员看到的就是“不像原文件”。

我们拿到过一张很朴素的评估表，也看过一组组截图。它们没有华丽的说明，却把问题指得非常具体：表格合并不对、字号不对、分页不对、图片位置不对、Excel 内容显示不全。

于是，整个项目从“能打开”走向“尽量像原文档一样打开”。

最近一次回归里，有效 Office 文件 21 个，Word、PowerPoint、Excel 三类逐一对照；另有 6 个 Office 临时锁文件或空文件，前端会温和提示，不再把用户带进无意义的错误里。

这不是一次漂亮的演示，而是一场和真实文件反复相遇后的打磨。

Word：既有分页，也有文档流

Word 预览最打动人的地方，往往是页面感。

文档不只是文字的堆叠。页边距、分页、标题位置、表格宽度、页眉页脚、页码，都在暗暗告诉读者：这份文件是不是可信，是不是接近原来的样子。

office-preview-js 的 Word 能力覆盖 DOC 与 DOCX。对于正式文档，它提供分页阅读；对于长篇材料，也提供文档流模式。

文档流模式最近做了专门完善。它不再把页眉页脚诊断信息、浮动对象附录和正文混在一起，也不会因为表格、图片或浮动元素把页面撑开。桌面端保持居中的白色阅读页，移动端也能自然收敛，表格在必要时只在局部横向滚动，而不是把整个页面推得七零八落。

目前 Word 方向已经重点覆盖：

• DOC 与 DOCX 预览
• 分页阅读与文档流阅读
• 中文字体、字号、加粗、行距等基础表现
• 表格、合并单元格、单元格边框与内容布局
• 图片、页眉页脚、页码与常见正文结构
• 横向页面、宽表格与移动端阅读
• Office 临时锁文件、空文件的友好提示

对于合同、说明书、接口规范、测试报告、档案材料，它已经具备很好的试用价值。

PowerPoint：旧版 PPT 也值得被认真对待

很多预览方案喜欢绕开旧版 PPT。

原因很简单：它麻烦。颜色、文本框、背景、嵌入图、流程箭头、图片填充，任何一个细节落下，页面都会立刻失去原来的表达。

office-preview-js 这一次把 PPT 和 PPTX 都纳入了同一套体验。新版 PPTX 可以按幻灯片居中展示，旧版 PPT 也在不断补齐背景、图片填充、箭头形状和文字适配。

最近的重点完善包括：

• PPT/PPTX 幻灯片居中预览
• 颜色渲染、近白背景和白色文字的处理
• 嵌入图片、填充图片、流程图箭头的呈现
• 文本框字号适配，减少标题、日期和正文之间的遮挡
• 多页演示稿的按需展示与滚动体验

这让它不只适合普通课件，也适合标书、汇报材料、产品方案、流程说明、销售演示等更贴近业务现场的文件。

Excel：边框、行高、长文本，终于不用再忍

Excel 的难点，常常藏在最普通的格子里。

一条边框没出来，表格的分组感就不对；一行高度差几像素，内容就被切掉；一个单元格的文字太长，溢到旁边的格子里，整张报表就变得不可信。

office-preview-js 里的 Excel 能力覆盖 XLS 与 XLSX，已经支持多工作表、合并单元格、边框、行高、单元格内容约束和大表格窗口化加载。解析放到 worker 背后运行，页面不必因为大表格而失去响应。

最近重点完善的方向包括：

• XLS / XLSX 两条路径
• 多工作表标签切换
• 合并单元格和边框继承
• 行高不足时的内容展示
• 长文本不再随意漫出同行单元格
• 大表格窗口化加载，减少首屏压力
• 外层页面与表格内部滚动的冲突处理

对于台账、库存、统计表、排班、项目清单、财务明细、运营报表，这些能力会直接改变用户的阅读感受。

为什么坚持纯前端 TypeScript

我们并不是没有考虑过更轻松的路。

服务器转换 PDF，当然成熟；调用云服务，当然省心；引入重型商业控件，当然也能在短时间里看到效果。

但这些方案都有自己的代价。

服务器转换会带来排队、存储、清理、权限、并发和部署成本。云服务会让敏感文件离开自己的系统。重型控件往往授权复杂、体积庞大、样式难以贴合已有产品。更重要的是，很多业务系统只想要一件事：在浏览器里，把文件尽量真实地打开。

所以我们选择了纯前端 TypeScript。

这一选择带来几个很直接的好处：

• 文档在浏览器侧预览，减少服务端转换压力
• 静态资源即可部署，适合 Vercel、Nginx、Cloudflare Pages 或私有静态服务
• 各格式能力独立拆分，按需加载，不把所有代码一次性塞给用户
• 能零依赖就零依赖；确实需要压缩包或复合文件读取的地方，只保留必要依赖
• 组件更容易进入现有系统、低代码平台、文件柜、知识库、档案系统和业务后台

它不是为了炫技而纯前端，而是为了让部署更轻，让文件更靠近用户，让系统少背一层沉重的转换负担。

轻量，不等于简陋

轻量有时候会被误解。

轻量不是少做，而是不把无关的东西带进来；不是牺牲体验，而是在每个格式里只保留真正需要的路径。

office-preview-js 的最新构建采用按需加载。用户选择 Word，才加载 Word 渲染；选择 Excel，才进入表格解析；选择演示文稿，才呈现幻灯片。构建产物使用 hash 文件名，去掉 source map，并配合静态资源缓存策略，重复访问会更轻盈。

这一次线上也增加了更合理的缓存：

• 核心资源长期缓存
• WASM 与样例短期缓存
• 大文件下载有进度反馈
• Excel 通过 worker 与窗口化减少卡顿

页面上的变化很简单：打开更清爽，等待更有数，滚动更自然，移动端也不再被复杂文档拖得狼狈。

它适合谁

如果你的系统里有这些场景，office-preview-js 值得试一试：

• OA、ERP、CRM、项目管理系统
• 招投标平台、合同管理、档案管理
• 知识库、网盘、文件柜、低代码平台
• 政企内网、私有化系统、客户资料系统
• 需要浏览器直接预览 Office 文件，但不希望引入沉重转换服务的产品

它尤其适合那些既在意还原度，又在意部署成本、隐私边界和前端集成体验的团队。

免费试用，满意再部署

你可以直接打开 Demo：

https://demo.flyfish.group^[2]

在线体验 DOC、DOCX、PPT、PPTX、XLS、XLSX 六类样例，也可以上传自己的文件查看效果。

我们愿意把真实样例摆出来，也欢迎你用自己的复杂文件来检验。表格、分页、演示稿、老格式、移动端、宽表、长文本，这些过去最容易让人头疼的地方，正是这个组件最值得看的地方。

office-preview-js 完全免费试用。

如果试用后觉得适合你的业务，可以按需联系客服部署，也可以开通源码，放进自己的产品体系里继续生长。

一份文档，本应在需要它的人面前自然展开。

现在，它可以不经过服务器转换，不离开你的系统，也不打断用户的阅读。

这就是 office-preview-js 想做的事：把复杂的 Office 预览，安静地交还给浏览器。

引用链接