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/

相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
CodeCraft Studio5 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
Light607 小时前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度
linux·pdf·可观测性·异步队列·plt转pdf·权限治理·进度查询
ftswsfb7 小时前
PDF文件基础-计算机字体
pdf
Metaphor6928 小时前
Java 高效处理 Word 文档:查找并替换文本的全面指南
java·经验分享·word
一只小风华~9 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
切糕师学AI10 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
虎头金猫10 小时前
如何在Linux上使用Docker在本地部署开源PDF工具Stirling PDF:StirlingPDF+cpolar让专业操作像在线文档一样简单
linux·运维·ubuntu·docker·pdf·开源·centos
书源11 小时前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js