各种格式文件预览

 pdf文件

<embed:src="文件的地址" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">

图片

<img :src="文件的地址" style="width: 100%;height: 100%;object-fit: contain;display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 90%);" :οnlοad="加载成功返回">

txt

// 这属于一个通用的预览方式，可以预览多种格式的文件

 <iframe :src="文件的地址" width='100%' height='100%' frameborder='1' ></iframe>

 docx(安装 vue-office/docx）docx文件预览 | vue-office

<vue-office-docx :src="文件的地址" style="width: 100%;height: 100%;" @rendered="加载成功返回" />

 xlsx(安装 vue-office/xlsx）xlsx文件预览 | vue-office

 <vue-office-excel :src="文件的地址" style="width: 100%;height: 100%;" @rendered="加载成功返回" />

 视频 安装-ckplayer

// 调用

<shipinyulan :videoPath="文件的地址" @ReturnData="ReturnData" /> 

<!--
 * @Description: 视频预览文件
-->
<template>
  <div class="playerContainer" ref="playerContainer"></div>
</template>
<script>
import { onMounted, onUnmounted, ref, watch } from 'vue'

export default {
  props: {
    videoPath: {
      type: String,
      required: true
    }
  },
  setup (props, ctx) {
    const playerContainer = ref(null)
    let playerInstance = null

    onMounted(() => {
      initPlayer()
    })

    watch(
      () => props.videoPath, () => {
        // 当路径变化时重新播放新视频
        playerInstance && initPlayer()
      }
    )
    onUnmounted(() => {
      // 销毁播放器实例
      playerInstance && playerInstance.remove()
    })

    const initPlayer = () => {
      // 创建CKPlayer实例
      playerInstance = new ckplayer({
        container: playerContainer.value,
        autoplay: true, // 是否自动播放
        video: props.videoPath
      })
      playerInstance.duration(function (t) {
        // t=当前视频总时间
        console.log('当前视频总时间-----')
        console.log(t)
        ctx.emit('ReturnData', t)
      })
      playerInstance.time(function (t) {
        // t=当前播放时间
        console.log('当前播放时间-----')
        console.log(t)
        ctx.emit('ReturnData', t)
      })
      playerInstance.ended(function () {
        // 视频播放已结束
        console.log('视频播放已结束')
        ctx.emit('ReturnData', false)
      })
      playerInstance.error(function (obj) {
        // 监听到错误，obj=错误内容
        console.log('监听到错误-----')
        console.log(obj)
        ctx.emit('ReturnData', obj)
      })
    }

    return {
      playerContainer
    }
  }
}
</script>
<style scoped>
.card-header {
  text-align: center;
  border-bottom: 2px dotted #c5c5c5;
}
  .playerContainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>