IntelliClass_FE/pages/preview/[resource_url].vue

64 lines
1.5 KiB
Vue

<script lang="ts" setup>
import VueOfficePptx from '@vue-office/pptx'
const {
params: { resource_url },
} = useRoute()
const url = computed(() => {
return atob(resource_url as string)
})
const fileExtension = computed(() => {
const lastDotIndex = url.value.lastIndexOf('.')
if (lastDotIndex === -1) return ''
return url.value.substring(lastDotIndex + 1).toLowerCase()
})
const fileType = computed(() => {
const ext = fileExtension.value
if (ext === 'pdf') return 'pdf'
if (ext === 'doc' || ext === 'docx') return 'word'
if (ext === 'ppt' || ext === 'pptx') return 'ppt'
if (ext === 'xls' || ext === 'xlsx') return 'excel'
if (ext === 'txt') return 'txt'
if (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif')
return 'image'
if (ext === 'mp4' || ext === 'avi' || ext === 'mov') return 'video'
if (ext === 'mp3' || ext === 'wav') return 'audio'
return ''
})
</script>
<template>
<div class="w-full h-screen">
<div v-if="!url">
<div class="flex items-center justify-center h-full">
<p class="text-muted-foreground">
资源链接无效
</p>
</div>
</div>
<div
v-else
class="w-full h-full"
>
<VueOfficePptx
v-if="fileType === 'ppt'"
:src="url"
class="w-full h-full"
:options="{
autoSize: true,
autoHeight: true,
autoWidth: true,
autoScale: true,
autoRotate: true,
autoFit: true,
}"
/>
</div>
</div>
</template>
<style scoped></style>