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各种类型文件预览内容请搜索编程教程以前的文章，希望大家多多支持编程教程！

 nextTicknextTick 是 Vue.js 提供的一个函数，并非浏览器内置。nextTick 函数接收一个回调函数 cb，在下一个 DOM 更新循环之后执行。比如下面的示例：< ...