48 lines
1.8 KiB
Plaintext
48 lines
1.8 KiB
Plaintext
<template>
|
|
<div class="w-full h-full p20px bg-#fff">
|
|
<!-- <div class=""></div> -->
|
|
<!-- <el-icon color="#fff" size="26px" @click="" class="absolute left-92% bg-#F43"><Close /></el-icon> -->
|
|
<div ref="animationContainer" class="relative w-full h-full rd-15px">
|
|
|
|
<VueOfficeExcel v-if="srcType === 'xlsx'" :src="src" class="absolute top-0 z-2000 min-h-500px max-h-1200px w-full"/>
|
|
<VueOfficeDocx v-else-if="srcType ==='docx'" style="height:100%; width:100%;" :src="src" class="absolute top-2% z-2000"/>
|
|
<VueOfficePdf v-else-if="srcType === 'pdf'" style="height:100%; width:100%;" :src="src" class="absolute z-2000"/>
|
|
<!-- <iframe v-else-if="srcType === 'pdf'" :src="src" class="min-h-800px max-h-1000px w-full z-2000" ></iframe> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import lottie from 'lottie-web';
|
|
import animationData from '../assets/images/animation_ll6h8pi7.json';
|
|
import VueOfficeDocx from '@vue-office/docx'
|
|
import '@vue-office/docx/lib/index.css'
|
|
|
|
import VueOfficeExcel from '@vue-office/excel'
|
|
import '@vue-office/excel/lib/index.css'
|
|
import VueOfficePdf from '@vue-office/pdf'
|
|
const animationContainer = ref(null);
|
|
const props = defineProps({
|
|
data:String,
|
|
datas:String
|
|
})
|
|
const src =ref()
|
|
const srcType =ref()
|
|
onMounted(() => {
|
|
src.value = props.data
|
|
srcType.value = props.datas
|
|
// console.log(props.data)
|
|
if (animationContainer.value) {
|
|
const animation = lottie.loadAnimation({
|
|
container: animationContainer.value,
|
|
animationData: animationData,
|
|
renderer: 'canvas', // You can change this based on your animation type
|
|
loop: true,
|
|
autoplay: true,
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|