vue实现 传入不同的文件实现不同的 word pdf excel 在线预览

公司要做一个文件上传后 回显直接是预览的一个效果 找了半天看见了一个vue插件
 

vue-office

实现了 word pdf excel的在线预览 话不多数直接上代码
 

//docx文档预览组件
npm install @vue-office/docx

//excel文档预览组件
npm install @vue-office/excel

//pdf文档预览组件
npm install @vue-office/pdf

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
在你的项目package.js里面查看
像我的项目就是 "vue": "2.6.10",
 

npm install @vue/composition-api

然后我们现在开始做代码的一个处理

通过传值 把你的网络地址传入 office组件
现在我们看封装的office组件
 

这里我并没有引用他的css样式组件库 因为我不太需要 我自己写了一点 如果你需要的话也要引入

 

//引入相关样式
import '@vue-office/excel/lib/index.css'

//引入相关样式
import '@vue-office/docx/lib/index.css'

我去官网查了一下pdf没有相关样式

最后是通过传入文件不同的后缀名 做的判断 渲染哪个文件。

代码不可以复制粘贴  以为项目里封装了 一些自定义的elenemt-ui 插件

最后是感谢作者掘金：这可能是最简单的docx、pdf、excel文件预览vue组件库 - 掘金 (juejin.cn)

vue-office官网: vue-office简介 | vue-office

gethup源码:GitHub - 501351981/vue-office: 支持word(.docx)、excel(.xlsx)、pdf等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3，也支持React等非Vue框架。Web-based pdf, excel, word preview library