vue-office：5.4k 预览组件库，支持 docx/xlsx/pdf/pptx
Java精选面试题（微信小程序）：5000+道面试题和选择题，包含Java基础、并发、JVM、线程、MQ系列、Redis、Spring系列、Elasticsearch、Docker、K8s、Flink、Spark、架构设计、大厂真题等，在线随时刷题！一、项目介绍
今天给大家介绍 vue-office，一套基于 Vue 的 Office 文档在线预览组件库，支持在浏览器中直接预览 Word、Excel、PDF、PPT 等常见办公文档，适用于 Vue 2/3，也可在 React、原生 JS 等非 Vue 环境中使用。
二、功能与定位
2.1 文档类型
2.2 项目特点
一站式：Word、Excel、PDF、PPT 统一用一套组件方案，无需为每种格式单独选型。
接入简单：主要通过组件的 src 传入文档地址或二进制数据即可完成预览。
体验与性能：针对不同格式选用合适的前端方案，并对大数据量做了优化（如 PDF 虚拟列表）。
框架兼容：支持 Vue 2、Vue 3，也提供在 React、原生 JS 等非 Vue 项目中的使用方式。
三、安装与依赖
按需安装对应格式的包，并配合 vue-demi 做 Vue 2/3 兼容：
若使用 Vue 2.6 及以下，还需安装：
npm install @vue/composition-api
四、典型使用场景
文档来源通常有三种，组件都通过 src 接收：
CDN/静态地址：直接传入文档 URL 字符串（如 https://xxx.com/file.docx）。
接口返回文件流：请求后端接口得到 ArrayBuffer 或 Blob，再传给 src。
本地上传：用户选择文件后，用 FileReader 读成 ArrayBuffer，再传给 src。
Excel、PDF、PPT 的用法类似：引入对应组件与样式，将 src 设为 URL 或 ArrayBuffer/Blob，并可按需监听 @rendered、@error 等事件。五、实现说明
docx：依赖 docx-preview，相关 issue 由上游库决定。
pdf：基于 pdf.js，并做了虚拟列表等优化以提升大文件性能。
excel：使用 exceljs + x-data-spreadsheet，在样式与兼容性上做了增强。
pptx：使用 pptx-preview，源码需单独联系开源作者获取。
六、适用场景
企业级 OA、在线知识库、文档中心的在线预览；
支持 Word、Excel、PDF、PPT 的 Vue 项目；
来自 URL、上传或后端接口，且统一用前端组件渲染的场景；
Vue 2 或 Vue 3 项目，及在不使用 Vue 的项目里嵌入预览能力时的备选方案。
在线示例：https://501351981.github.io/vue-office/examples/docs/
仓库地址：https://github.com/501351981/vue-office
公众号“Java精选”所发表内容注明来源的，版权归原出处所有（无法查证版权的或者未注明出处的均来自网络，系转载，转载的目的在于传递更多信息，版权属于原作者。如有侵权，请联系，笔者会第一时间删除处理！最近有很多人问，有没有读者交流群！加入方式很简单，公众号Java精选，回复“加群”，即可入群！
点击“阅读原文”，了解更多精彩内容！
文章有帮助的话，点在看，转发吧！