bureau_office/src/components/FilePreview/index.vue

<template>
  <div>
    <template v-if="type === 'office'">
      <!-- <iframe :src="`${window.globalVariables.microsoftPreview}${getFullUrl(url)}`" style="width: 100%; height: 600px;" frameborder='0'></iframe> -->
    </template>
    <template v-else-if="type === 'pdf'">
      <object type="application/pdf" :data="getFullUrl(url)" style="width: 100%; height: 600px;"></object>
    </template>
    <template v-else-if="type === 'video'">
      <video class="w-full h-full" :src="getFullUrl(url)" controls></video>
    </template>
    <template v-else-if="type === 'audio'">
      <audio class="w-full h-full" :src="getFullUrl(url)"></audio>
    </template>
    <template v-else-if="type === 'image'">
      <div class=" bg-light-300" style="height: 100%;">
        <img class=" object-contain" :src="getFullUrl(url)" style="width: 100%;height: 100%;" />
      </div>
    </template>
    <el-result v-else-if="type === 'other'" icon="error" title="错误信息" sub-title="文件格式不支持">
    </el-result>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: ""
    }
  },
  props: ['url'],
  watch: {
    url: {
      immediate: true,
      handler(val) {
        if (val != "") {
          this.type = this.getFileType(val);
        }
      }
    }
  },
  methods: {
    getFullUrl(url) {
      // return url;
      if (!url) return '';
      return url.startsWith('http') ? url : window.GLOBAL_CONFIG.api + '/' + url
    },
    getFileType(str) {
      if (str) {
        str = str += ''.toLocaleLowerCase()
        const ext = str.split('.').at(-1)
        if (['pdf'].includes(ext)) {
          return 'pdf'
        } else if (['mp4'].includes(ext)) {
          return 'video'
        } else if (['ppt', 'pptx', 'xls', 'xlsx', 'doc', 'docx'].includes(ext)) {
          return 'office'
        } else if (['mp3'].includes(ext)) {
          return 'audio'
        } else if (['png', 'jpg', 'jpeg'].includes(ext)) {
          return 'image'
        }
        return 'other'
      }
      return 'other'
    }
  }
}
</script>

<style>
</style>