预览文件添加支持ppt

This commit is contained in:
2026-09-17 14:22:27 +08:00
parent 347c6839cd
commit 9eff872e14
2 changed files with 24 additions and 16 deletions
+4 -4
View File
@@ -645,20 +645,20 @@ onMounted(async () => {
</template> </template>
<!-- Word 预览 --> <!-- Word 预览 -->
<template v-if="handleFileType(previewFile?.file_type) === 'word'"> <template v-if="handleFileType(previewFile?.file_type) === 'word'">
<VueOfficeDocx :src="previewFile?.file_url" class="w-full" /> <VueOfficeDocx :src="previewFile?.file_url" class="w-full items-center" />
</template> </template>
<!-- Excel 预览 --> <!-- Excel 预览 -->
<template v-if="handleFileType(previewFile?.file_type) === 'excel'"> <template v-if="handleFileType(previewFile?.file_type) === 'excel'">
<VueOfficeExcel :src="previewFile?.file_url" class="w-full" /> <VueOfficeExcel :src="previewFile?.file_url" class="w-full items-center" />
</template> </template>
<!-- Ppt 预览 --> <!-- Ppt 预览 -->
<template v-if="handleFileType(previewFile?.file_type) === 'ppt'"> <template v-if="handleFileType(previewFile?.file_type) === 'ppt'">
<VueOfficePptx :src="previewFile?.file_url" class="w-full" /> <VueOfficePptx :src="previewFile?.file_url" class="w-full items-center" />
</template> </template>
<!-- PDF 预览 --> <!-- PDF 预览 -->
<template v-if="handleFileType(previewFile?.file_type) === 'pdf'"> <template v-if="handleFileType(previewFile?.file_type) === 'pdf'">
<div class="h-[68vh]"> <div class="h-[68vh]">
<PDF :src="previewFile?.file_url" class="w-full h-full" /> <PDF :src="previewFile?.file_url" class="w-full h-full items-center" />
</div> </div>
</template> </template>
</div> </div>
@@ -11,7 +11,7 @@ import { uploadFileApi, deleteFileApi } from "@/service/api/file";
import Footer from './footer.vue' import Footer from './footer.vue'
import PDF from 'pdf-vue3' import PDF from 'pdf-vue3'
import { VueOfficeDocx, VueOfficeExcel } from 'vue3-office-preview' import { VueOfficeDocx, VueOfficeExcel, VueOfficePptx } from 'vue3-office-preview'
import 'vue3-office-preview/lib/style.css' import 'vue3-office-preview/lib/style.css'
const themeStore = useThemeStore(); const themeStore = useThemeStore();
@@ -370,14 +370,18 @@ const handleFileType = (type:string) => {
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'] const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
const wordExtensions = ['docx'] const wordExtensions = ['docx']
const excelExtensions = ['xlsx'] const excelExtensions = ['xlsx']
const pptExtensions = ['pptx']
if(imageExtensions.includes(type)){
return 'image'
}
if(wordExtensions.includes(type)){ if(wordExtensions.includes(type)){
return 'word' return 'word'
} }
if(excelExtensions.includes(type)){ if(excelExtensions.includes(type)){
return 'excel' return 'excel'
} }
if(imageExtensions.includes(type)){ if(pptExtensions.includes(type)){
return 'image' return 'ppt'
} }
if(type==='pdf'){ if(type==='pdf'){
return 'pdf' return 'pdf'
@@ -798,7 +802,7 @@ defineExpose({form, questions, applyAiResult, generateLevel: useAiLevel})
:show="previewFile !== null" :show="previewFile !== null"
preset="card" preset="card"
:auto-focus="false" :auto-focus="false"
:style="{ width: '1100px', height: 'auto' }" :style="{ width: '80%', height: 'auto' }"
:segmented="{ content: true, footer: true }" :segmented="{ content: true, footer: true }"
@update:show="(v) => !v && (previewFile = null)" @update:show="(v) => !v && (previewFile = null)"
> >
@@ -817,23 +821,27 @@ defineExpose({form, questions, applyAiResult, generateLevel: useAiLevel})
<div v-if="previewFile" class="max-h-[70vh] overflow-x-auto rounded-lg border"> <div v-if="previewFile" class="max-h-[70vh] overflow-x-auto rounded-lg border">
<!-- 图片预览 --> <!-- 图片预览 -->
<template v-if="handleFileType(previewFile?.file_type) === 'image'"> <template v-if="handleFileType(previewFile?.file_type) === 'image'">
<div class="flex items-center justify-center py-2"> <div class="flex items-center justify-center py-2">
<NImage :src="previewFile?.file_url" /> <NImage :src="previewFile?.file_url" />
</div> </div>
</template> </template>
<!-- Word 预览 --> <!-- Word 预览 -->
<template v-if="handleFileType(previewFile?.file_type) === 'word'"> <template v-if="handleFileType(previewFile?.file_type) === 'word'">
<VueOfficeDocx :src="previewFile?.file_url" class="w-full" /> <VueOfficeDocx :src="previewFile?.file_url" class="w-full items-center" />
</template> </template>
<!-- Excel 预览 --> <!-- Excel 预览 -->
<template v-if="handleFileType(previewFile?.file_type) === 'excel'"> <template v-if="handleFileType(previewFile?.file_type) === 'excel'">
<VueOfficeExcel :src="previewFile?.file_url" class="w-full" /> <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> </template>
<!-- PDF 预览 --> <!-- PDF 预览 -->
<template v-if="handleFileType(previewFile?.file_type) === 'pdf'"> <template v-if="handleFileType(previewFile?.file_type) === 'pdf'">
<div class="h-[68vh]"> <div class="h-[68vh]">
<PDF :src="previewFile?.file_url" class="w-full h-full" /> <PDF :src="previewFile?.file_url" class="w-full h-full items-center" />
</div> </div>
</template> </template>
</div> </div>
</div> </div>