<template>
|
<div v-loading="loading" class="wrap">
|
<vue-office-docx
|
v-if="fileInfo.fileType === 'docx' || fileInfo.fileType === 'doc'"
|
:src="fileInfo.filePath"
|
style="height: 100%"
|
@rendered="rendered"
|
@error="HandlError"
|
/>
|
|
<vue-office-pdf
|
v-if="fileInfo.fileType === 'pdf'"
|
:src="fileInfo.filePath"
|
style="height: 100%"
|
@rendered="rendered"
|
@error="HandlError"
|
/>
|
|
<vue-office-excel
|
v-if="fileInfo.fileType === 'xlsx'"
|
:src="fileInfo.filePath"
|
style="height: 78vh"
|
@rendered="rendered"
|
@error="HandlError"
|
/>
|
|
<el-image
|
v-if="fileInfo.fileType === 'image'"
|
:src="fileInfo.filePath"
|
alt="Preview"
|
@load="rendered"
|
@error="HandlError"
|
/>
|
|
<video
|
v-if="fileInfo.fileType === 'video' && fileInfo.filePath"
|
width="100%"
|
controls
|
controlslist="nodownload"
|
>
|
<!-- /** controlslist="nodownload" 隐藏下载按钮 */ -->
|
<source :src="fileInfo.filePath" />
|
Download the
|
<a :href="fileInfo.filePath">MP4</a>
|
</video>
|
|
<audio
|
v-if="fileInfo.fileType === 'audio' && fileInfo.filePath"
|
controls
|
controlsList="nodownload"
|
style="width: 100%"
|
>
|
<source :src="fileInfo.filePath" type="audio/mp3" />
|
您的浏览器不支持audio标签。
|
</audio>
|
</div>
|
</template>
|
<script setup>
|
import { onMounted, ref } from "vue";
|
//引入VueOfficeDocx组件 相关样式
|
// import VueOfficeDocx from "@vue-office/docx/lib/v3/vue-office-docx.mjs";
|
// import VueOfficeExcel from "@vue-office/excel/lib/v3/vue-office-excel.mjs";
|
// import VueOfficePdf from "@vue-office/pdf/lib/v3/vue-office-pdf.mjs";
|
//引入相关样式
|
// import "@vue-office/docx/lib/v3/index.css";
|
// import "@vue-office/excel/lib/v3/index.css";
|
|
const props = defineProps({
|
fileInfo: {
|
type: Object,
|
required: true
|
}
|
});
|
|
const loading = ref(true);
|
/** rendered：渲染完成后调用 */
|
const rendered = () => {
|
loading.value = false;
|
};
|
/** HandlError ：渲染失败后调用 */
|
const HandlError = errorInfo => {
|
// 假设你已经配置了全局的 toast
|
alert("该文件暂不支持在线预览");
|
loading.value = false;
|
};
|
onMounted(() => {
|
console.log(props.fileInfo);
|
});
|
</script>
|
