news 2026/4/16 0:33:03

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/4/13 17:05:58

USACO历年青铜组真题解析 | 2019年12月

​欢迎大家订阅我的专栏:算法题解:C与Python实现! 本专栏旨在帮助大家从基础到进阶 ,逐步提升编程能力,助力信息学竞赛备战! 专栏特色 1.经典算法练习:根据信息学竞赛大纲,精心挑选…

作者头像 李华
网站建设 2026/4/16 13:05:13

低查重AI助力:教材编写不再愁,AI教材生成简单又高效!

在编写教材的过程中,丰富的资料支持必不可少。传统的资料整合方式明显已经无法满足现代的需求。以往的课标文件、学术论文和教学案例,分散在各种渠道,如知网和教研平台,筛选出有用的信息常常需要耗费几天时间。即使资料收集完整&a…

作者头像 李华
网站建设 2026/4/16 13:02:09

网络安全快速入门:从零到上手,新手避坑全攻略

后台总收到私信:“学网安该先看 Linux 还是先学 Burp?”“找了一堆教程,越学越乱怎么办?”—— 其实不是你学得慢,是没找对循序渐进的路径。很多人一上来就跟风学工具、刷漏洞,结果基础不牢,后期…

作者头像 李华
网站建设 2026/4/14 14:15:16

[STM32L5] 【STM32L562E_DK开发板】--3.串口打印

本篇讲述串口打印功能。 一.原理与准备 1.开发板套件配有一个PMOD扩展板,上面有串口接线端子CN2.硬件接线如下。 2.由扩展板接到主板上,反向找出串口引脚PC10、PC11,查阅datasheet分别为UART3 TX、RX.如下图红框所示。 3.开发板上使用到了…

作者头像 李华