核心内容摘要
视觉巅峰的艺术盛宴：91糖心桥本香菜丝袜在线一区精彩内容深度解析
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 环境中使用。
功能与定位
1 文档类型
2 项目特点一站式Word、Excel、PDF、PPT 统一用一套组件方案无需为每种格式单独选型。
接入简单主要通过组件的 src 传入文档地址或二进制数据即可完成预览。
体验与性能针对不同格式选用合适的前端方案并对大数据量做了优化如 PDF 虚拟列表。
框架兼容支持 Vue
Vue 3也提供在 React、原生 JS 等非 Vue 项目中的使用方式。
安装与依赖按需安装对应格式的包并配合 vue-demi 做 Vue 2/3 兼容若使用 Vue
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://
github.io/vue-office/examples/docs/仓库地址https://github.com/501351981/vue-office公众号“Java精选”所发表内容注明来源的版权归原出处所有无法查证版权的或者未注明出处的均来自网络系转载转载的目的在于传递更多信息版权属于原作者。
如有侵权请联系笔者会第一时间删除处理最近有很多人问有没有读者交流群加入方式很简单公众号Java精选回复“加群”即可入群点击“阅读原文”了解更多精彩内容文章有帮助的话点在看转发吧