47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<!--
|
|
* @Author: zhaojinfeng 121016171@qq.com
|
|
* @Date: 2023-07-18 12:22:11
|
|
* @LastEditors: zhaojinfeng 121016171@qq.com
|
|
* @LastEditTime: 2023-08-22 01:57:45
|
|
* @FilePath: \vue3\packages\preview-office-view\index.vue
|
|
* @Description:
|
|
*
|
|
-->
|
|
<template>
|
|
<div class="preview-office-view overflow-hidden h-100vh">
|
|
<template v-if="src">
|
|
<VueOfficeDocx v-if="extension === 'docx'" class="h-full" :src="src" />
|
|
<VueOfficeExcel v-else-if="extension === 'xlsx'" class="h-full" :src="src" />
|
|
<VueOfficePdf v-else-if="extension === 'pdf'" class="h-full" :src="src" static-file-url="https://registry.npmmirror.com/pdfjs-dist/3.1.81/files/cmaps/" />
|
|
</template>
|
|
<el-empty v-else>
|
|
<template #description>
|
|
暂不支持.{{ extension }}格式的文件
|
|
</template>
|
|
</el-empty>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="ThPreviewOfficeView">
|
|
import VueOfficePdf from '@vue-office/pdf'
|
|
import VueOfficeDocx from '@vue-office/docx'
|
|
import VueOfficeExcel from '@vue-office/excel'
|
|
import '@vue-office/excel/lib/index.css'
|
|
import '@vue-office/docx/lib/index.css'
|
|
|
|
const props = defineProps<{
|
|
/** 文件的url */
|
|
url?: string | string[]
|
|
/** 文件的拓展名 */
|
|
extension?: string
|
|
}>()
|
|
|
|
const src = computed(() => {
|
|
const { url } = props
|
|
if (typeof url === 'string')
|
|
return url
|
|
if (Array.isArray(url))
|
|
return url[0]
|
|
})
|
|
</script>
|