vue3中各种类型文件进行预览功能实例

2022-04-15 0 422
目录
  • 前言
  • 1.office文档类型的预览
  • 2.pdf类型的预览
  • 3. 图片类型
  • 4.视频类型
  • 5. 音频类型
  • 总结

前言

摸着石头过河的滋味不好受啊,听说大厂的大佬们都在忙着用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='%20+%20fileUrl" 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各种类型文件预览内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript vue3中各种类型文件进行预览功能实例 https://www.niceym.com/23586.html