64 lines
2.0 KiB
Vue
64 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import PDF from 'pdf-vue3'
|
|
import { VueOfficeDocx, VueOfficeExcel, VueOfficePptx } from 'vue3-office-preview'
|
|
import 'vue3-office-preview/lib/style.css'
|
|
|
|
const props = defineProps(['previewFile',])
|
|
|
|
// 判断文件类型
|
|
const handleFileType = (type:string) => {
|
|
if(type){
|
|
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
|
|
const wordExtensions = ['docx']
|
|
const excelExtensions = ['xlsx']
|
|
const pptExtensions = ['pptx']
|
|
if(imageExtensions.includes(type)){
|
|
return 'image'
|
|
}
|
|
if(wordExtensions.includes(type)){
|
|
return 'word'
|
|
}
|
|
if(excelExtensions.includes(type)){
|
|
return 'excel'
|
|
}
|
|
if(pptExtensions.includes(type)){
|
|
return 'ppt'
|
|
}
|
|
if(type==='pdf'){
|
|
return 'pdf'
|
|
}
|
|
}
|
|
return ''
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-h-[70vh] overflow-x-auto rounded-lg border">
|
|
<!-- 图片预览 -->
|
|
<template v-if="handleFileType(previewFile?.file_type) === 'image'">
|
|
<div class="flex items-center justify-center py-2">
|
|
<NImage :src="previewFile?.file_url" />
|
|
</div>
|
|
</template>
|
|
<!-- Word 预览 -->
|
|
<template v-if="handleFileType(previewFile?.file_type) === 'word'">
|
|
<VueOfficeDocx :src="previewFile?.file_url" class="w-full items-center" />
|
|
</template>
|
|
<!-- Excel 预览 -->
|
|
<template v-if="handleFileType(previewFile?.file_type) === 'excel'">
|
|
<VueOfficeExcel :src="previewFile?.file_url" class="w-full items-center" />
|
|
</template>
|
|
<!-- Ppt 预览 -->
|
|
<template v-if="handleFileType(previewFile?.file_type) === 'ppt'">
|
|
<VueOfficePptx :src="previewFile?.file_url" class="w-full items-center" />
|
|
</template>
|
|
<!-- PDF 预览 -->
|
|
<template v-if="handleFileType(previewFile?.file_type) === 'pdf'">
|
|
<div class="h-[68vh]">
|
|
<PDF :src="previewFile?.file_url" class="w-full h-full items-center" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|