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/

相关推荐
开发者小天5 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
落落鱼20137 小时前
Dompdf库html生成pdf时editor编辑器中文本长度被截断不会自动换行问题处理
pdf·编辑器·php·html生成pdf
月阳羊9 小时前
【论文学习与撰写】Mathtype的安装与word插件安装
学习·word
程序员杨工10 小时前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
theOtherSky11 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
「QT(C++)开发工程师」12 小时前
【LUA教程】LUA脚本语言中文教程.PDF
开发语言·pdf·lua
Pu_Nine_912 小时前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
一个处女座的程序猿O(∩_∩)O13 小时前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
姜至13 小时前
el-calendar实现自定义展示效果
前端·vue.js