news 2026/2/10 15:22:21

vue-office:5.4k 预览组件库,支持 docx/xlsx/pdf/pptx

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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精选,回复“加群”,即可入群!

点击“阅读原文”,了解更多精彩内容!

文章有帮助的话,点在看,转发吧!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/10 15:04:21

分子模拟耗时久的底层逻辑与科研效率提升方案解析

在材料科学、药物研发、能源催化等科研领域,分子模拟(如分子动力学、第一性原理计算)是揭示微观机制的核心工具。但“跑一个任务要半个月”的困境,却成了很多团队的“科研进度卡脖子”问题——原本计划3个月完成的实验&#xff0c…

作者头像 李华
网站建设 2026/2/9 22:25:09

怎么才能系统的学好学透网络安全?学到后面感觉东西越来越多

接触网络安全常感技术点碎片化是必经阶段,核心在于构建实战知识网络。以下是为你设计的阶梯式成长路径,融合攻防本质与工程实践,助你完成从“工具使用者”到“体系构建者”的跨越: 一、能力金字塔模型 1. 攻防基石(30…

作者头像 李华
网站建设 2026/2/10 0:56:55

使用vue3如何实现内网大文件的秒传和续传?

大文件传输系统设计方案(基于SM4国密算法) 需求分析 作为四川某软件公司的开发人员,我面临以下核心需求: 实现10GB级别大文件的分片上传/下载采用国密SM4算法进行端到端加密服务端需支持SM4加密存储兼容主流浏览器及信创国产化…

作者头像 李华
网站建设 2026/2/9 20:55:02

用过才敢说 10个AI论文网站测评!本科生毕业论文写作必备工具推荐

在当前学术写作日益依赖AI工具的背景下,本科生在毕业论文写作过程中常面临选题困难、文献检索繁琐、格式规范不熟、改稿效率低等挑战。为了帮助学生更高效地完成论文,笔者基于2026年的实测数据与用户反馈,对市面上主流的AI论文工具进行了系统…

作者头像 李华
网站建设 2026/2/9 22:25:53

发票红章盖住金额怎么办

财务人员在日常工作中,常常遇到一个让人头疼的问题:发票上的红色印章不小心盖到了金额区域,导致关键数字被遮挡。这种情况到底能不能用?又该如何处理?本文将从实务操作和技术解决方案两个角度,帮你彻底搞定…

作者头像 李华
网站建设 2026/2/10 6:09:41

ISO 13485深度解析:医疗设备软件开发的实践指南

1 ISO 13485:医疗设备质量的“操作系统”从医疗设备软件开发的角度看,ISO 13485可以被理解为整个医疗器械生命周期的“操作系统”。它不是一个具体的技术标准,而是一个框架性的质量管理体系(QMS)标准,专门为…

作者头像 李华