<script setup lang="ts">
interface Props {
  url: string
}
const props = defineProps<Props>()
// 文件扩展名
const fileExtensionName = $computed(() => {
  return props.url.split('.').pop() || ''
})
// office文件
const officeUrl = $computed(() => {
  return ['pptx', 'doc', 'docx', 'xls', 'xlsx'].includes(fileExtensionName)
    ? `https://view.officeapps.live.com/op/view.aspx?src=${props.url}`
    : ''
})
</script>

<template>
  <iframe allowfullscreen :src="officeUrl" :key="officeUrl" frameborder="0" style="width: 100%; height: 100%" v-if="officeUrl"></iframe>
  <object :data="url" style="width: 100%; height: 100%; object-fit: none" v-else></object>
</template>
