vue3中各种类型文件进行预览功能实例
前言
摸着石头过河的滋味不好受啊,听说大厂的大佬们都在忙着用vue3在升级项目,我也没事凑一波热闹。身处某小厂还是不甘于折腾。新做一个项目,直接上vue3 ,头脑发热 ,可能有人不计后果,但是跌跌撞撞还是基本搞完了,那记录一下吧
今天说一下开发过程中的某一个功能吧!反正耗费不少时间,先说说功能需求吧:在上传文件之后的文件列表中能够点击进行预览,包含文件媒体类型包括 图片 、word excel等文档文件、pdf、视频、音频 的预览针对pc端
1.office文档类型的预览
首先看到的是word excel 等文档文件的预览,针对改问题开始还是网上搜寻了一些方法,毕竟我这经验甚少,有人推荐a标签直接下载预览,显然不符合我们预期,有人推荐excel 使用sheetjs 但是我们word 也需要另找他法,最终我还是确定了使用微软的在线预览,使用iframe作为载体进行
<iframe frameborder="0" :src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl" width='100%'> </iframe>
需要考虑的是我当时element-plus的dialog 弹框里,iframe不能很好的撑开父元素所以又填充一些代码。并且加载过程比较慢,由于时间原因就没有考虑进行其他方法的尝试
2.pdf类型的预览
对于这种pdf的预览,感觉好解决啊,使用原来使用过的 npm install pdfjs-dist ,开搞就完了,万万没想到我这个目前还没有支持vue3 所以理所当然的上来一跑就报错也是理所应当的,果断百度啊,百度告诉我说,这个pdfjs-dist vue3 不支持呐还,换个方法吧,我***,用你说 我想找解决办法,主角来了下载之后将build和web文件夹放在我们的public文件下 做一下引用,注意自己的地址是不是对,我放在了一个embed 里
data.pdfUrl = './pdf/web/viewer.html?file='+type; // 线上预览
<embed :src="pdfUrl" style="width: 100%; "/>
3. 图片类型
我觉这种类型 ,我们都不必多说,直接上代码就可以了,处理一下url
<div v-if="showImg == true" class="dialog-body-content-base-style"> <el-image class="image-preview" :src="imgUrl" /> </div>
4.视频类型
对于视频类型本来是想直接使用 video元素直接放里的但是我是一个有追求的程序猿,追求自己的理想,没事就是折腾么,开始使用vue-video-palyer 进行视频预览,但是就是天不遂愿,完vue3 中报错 ,说白了又来了宝贝,没支持vue3 呗? 没事我习惯了,推荐大家用一波vue-vam-video
npm install vue-vam-video -s
import VamVideo from "vue-vam-video"; components: { VamVideo, }, setup(props,context) { const data = reactive({ videoOption: { properties: { poster: '', src:"", preload: "auto", // loop: "loop", // autoplay:"autoplay", // muted:true }, videoStyle: { width: "100%", // height: "600px", }, controlsConfig: { fullScreenTit:"全屏", EscfullScreenTit:"退出全屏", speedTit:"倍速", yinliangTit:"音量", jingyinTit:"静音", playTit:"播放", pauseTit:"暂停", fullScreen:true, speed:true, listen:true } }, }) }
<vam-video :properties="videoOption.properties" :videoStyle="videoOption.videoStyle" :controlsConfig="videoOption.controlsConfig" @play="playVideo" @canplay="canplayVideo" @pause="pauseVideo" ></vam-video>
5. 音频类型
吃了上边的亏,终于还是决定使用audio 这个标签了,直接使用就完了。
<audio :src="musicUrl" controls></audio>
综上建议大家考虑周全 ,像大厂的大佬们有自己的组件库,丝毫不担心,但是小厂的我们还是谨慎一点。 希望vue更多的组件库、功能库更加完善,毕竟站在巨人肩膀上是方便的。没事多研究源码 。。。。。。
总结
到此这篇关于vue3中各种类型文件进行预览功能的文章就介绍到这了,更多相关vue3各种类型文件预览内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 下面小编来给大家演示几个php操作zip文件的实例,我们可以读取zip包中指定文件与删除zip包中指定文件,下面来给大这介绍一下。 从zip压缩文件中提取文件 代...2016-11-25
Jupyter Notebook读取csv文件出现的问题及解决
这篇文章主要介绍了JupyterNotebook读取csv文件出现的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2023-01-06- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 有时我们接受或下载到的PSD文件打开是空白的,那么我们要如何来解决这个 问题了,下面一聚教程小伙伴就为各位介绍Photoshop打开PSD文件空白解决办法。 1、如我们打开...2016-09-14
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- C#使用System.IO中的文件操作方法在Windows系统中处理本地文件相当顺手,这里我们还总结了在Oracle中保存文件的方法,嗯,接下来就来看看整理的C#操作本地文件及保存文件到数据库的基本方法总结...2020-06-25
- 这篇文章主要介绍了解决python 使用openpyxl读写大文件的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-13
- 这篇文章主要介绍了C#实现HTTP下载文件的方法,包括了HTTP通信的创建、本地文件的写入等,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了SpringBoot实现excel文件生成和下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-02-09
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20