vue 预览 pdf、word、excel

vue 预览 pdf、word、excel

这是之前做项目的时候涉及到的一个功能,当时做了之后就一直没有整理,其实也很简单,功能不多,只是预览,没有在线编辑的功能,所以呢,啊哈哈哈哈哈,一个插件就可以了。

预览 pdf

预览 pdf 我是用的这个插件,直接运行一下命令就可以了:

bash 复制代码
npm install @vue-office/pdf vue-demi

然后在使用他的页面引入就可以使用了:

bash 复制代码
import VueOfficePdf from '@vue-office/pdf'

然后使用也很简单:

html 复制代码
<vue-office-pdf style="min-height: 500px;" :src="path" />

其中 path 是 PDF 文件的地址。

预览 word

其实这几个插件是一个妈生的,运行下面命令安装一下预览 word 的插件:

bash 复制代码
npm install @vue-office/docx vue-demi

然后同样是引入:

bash 复制代码
import VueOfficeDocx from '@vue-office/docx'

使用是和上面 pdf 差不多的:

html 复制代码
<vue-office-docx style="min-height: 500px;" :src="path" />

这里的 path 就是 word 文件的地址。

预览 excel

同样,运行命令安装一下预览 excel 的插件:

bash 复制代码
npm install @vue-office/excel vue-demi

安装完成还是引入:

bash 复制代码
import VueOfficeExcel from '@vue-office/excel'

引入完成一样是使用:

html 复制代码
<vue-office-excel style="min-height: 500px;" :src="path"  />

这里的 path 就是 excel 文件的地址。

好了预览完成了!

更多详细内容,戳这里:https://501351981.github.io/vue-office/examples/docs/guide/

相关推荐
岁月宁静8 分钟前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能
加洛斯1 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
2501_930707781 小时前
使用C#代码将ODT转换为PDF文件
pdf
搞什么滚去学习1 小时前
在昇腾910B服务上部署搭建适配PDF解析工具Mineru2.5开源项目
pdf
Never_Satisfied2 小时前
在JavaScript中,map方法使用指南
前端·javascript·vue.js
傻啦嘿哟2 小时前
Python高效实现Excel转PDF:无Office依赖的轻量化方案
python·pdf·excel
一嘴一个橘子2 小时前
useTemplateRef Vue3.5
javascript·vue.js
PHP武器库2 小时前
从零到一:用 Vue 打造一个零依赖、插件化的 JS 库
前端·javascript·vue.js
excel3 小时前
深入理解 Slot(插槽)
前端·javascript·vue.js
工业互联网专业4 小时前
基于大数据的学习资源推送系统的设计与实现 _django
vue.js·python·django·毕业设计·源码·课程设计·学习资源推送系统