# vue 预览 pdf、word、excel
vue 预览 pdf、word、excel
这是之前做项目的时候涉及到的一个功能,当时做了之后就一直没有整理,其实也很简单,功能不多,只是预览,没有在线编辑的功能,所以呢,啊哈哈哈哈哈,一个插件就可以了。
预览 pdf
预览 pdf 我是用的这个插件,直接运行一下命令就可以了:
npm install @vue-office/pdf vue-demi
然后在使用他的页面引入就可以使用了:
import VueOfficePdf from '@vue-office/pdf'
然后使用也很简单:
<vue-office-pdf style="min-height: 500px;" :src="path" />
其中 path
是 PDF 文件的地址。
预览 word
其实这几个插件是一个妈生的,运行下面命令安装一下预览 word 的插件:
npm install @vue-office/docx vue-demi
然后同样是引入:
import VueOfficeDocx from '@vue-office/docx'
使用是和上面 pdf 差不多的:
<vue-office-docx style="min-height: 500px;" :src="path" />
这里的 path
就是 word 文件的地址。
预览 excel
同样,运行命令安装一下预览 excel 的插件:
npm install @vue-office/excel vue-demi
安装完成还是引入:
import VueOfficeExcel from '@vue-office/excel'
引入完成一样是使用:
<vue-office-excel style="min-height: 500px;" :src="path" />
这里的 path
就是 excel 文件的地址。
好了预览完成了!
更多详细内容,戳这里:https://501351981.github.io/vue-office/examples/docs/guide/
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步