40 lines
1.1 KiB
Vue
40 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, defineAsyncComponent } from 'vue'
|
|
|
|
/** office/pdf 渲染:vue-office 组件按需异步加载,各自独立 chunk,不预览不下载 */
|
|
const props = defineProps<{
|
|
kind: 'docx' | 'xlsx' | 'pdf' | 'pptx'
|
|
data: ArrayBuffer
|
|
}>()
|
|
const emit = defineEmits<{ error: [string] }>()
|
|
|
|
const comps = {
|
|
docx: defineAsyncComponent(async () => {
|
|
await import('@vue-office/docx/lib/index.css')
|
|
return (await import('@vue-office/docx')).default
|
|
}),
|
|
xlsx: defineAsyncComponent(async () => {
|
|
await import('@vue-office/excel/lib/index.css')
|
|
return (await import('@vue-office/excel')).default
|
|
}),
|
|
pdf: defineAsyncComponent(() => import('@vue-office/pdf').then((m) => m.default)),
|
|
pptx: defineAsyncComponent(() => import('@vue-office/pptx').then((m) => m.default)),
|
|
}
|
|
const comp = computed(() => comps[props.kind])
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="comp"
|
|
:src="data"
|
|
class="office-host"
|
|
@error="emit('error', '文档渲染失败,请下载查看')"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.office-host {
|
|
height: 100%;
|
|
}
|
|
</style>
|