文件预览统一组件封装

2026-09-18 14:24:00 +08:00
parent da61394d36
commit 1d980ebcd0
6 changed files with 112 additions and 178 deletions
@@ -0,0 +1,63 @@
+<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>
+