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 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
bing_15813 小时前
Word 中为什么我的图片一拖就乱跑,怎么精确定位?
word
有什么东东13 小时前
取消office word中的段落箭头标记
word
midsummer_woo13 小时前
基于springboot+vue+mysql工程教育认证的计算机课程管理平台(源码+论文)
vue.js·spring boot·mysql
喝拿铁写前端14 小时前
技术是决策与代价的平衡 —— 超大系统从 Vue 2 向 Vue 3 演进的思考
前端·vue.js·架构
豆豆(设计前端)15 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
苦瓜若叶睦15 小时前
Vue (Official) v3.0.2 新特性 为非类npm环境引入 globalTypesPath 选项
vue.js
springfe010116 小时前
模块与组件区别
javascript·vue.js
结衣结衣.16 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js