vue3上传的文件在线查看

1、npm install @vue-office/pdf vue-demi   安装依赖

2、npm install @vue-office/excel vue-demi  安装依赖

3、npm install @vue-office/docx vue-demi   安装依赖

4、编写一个通用组件，现在只支持 .docx,.xlsx,.pdf 格式的文件，其他文件渲染不成功

<template><el-dialog v-model="lookFileVisible" title="查看文件" width="70%" :before-close="handleClose"><vue-office-docxv-if="currentAttachment.type === 'docx'":src="DownloadImgServerUrl + currentAttachment.src"style="height: 50vh;"@rendered="renderedHandler"@error="errorHandler"/><iframe v-if="currentAttachment.type === 'pdf'" style="width:100%;height:50vh;" :src="currentAttachment.src" frameBorder="0"></iframe><vue-office-excel:src="DownloadImgServerUrl + currentAttachment.src"v-if="currentAttachment.type === 'xlsx'"style="height: 50vh;"@rendered="renderedHandler"@error="errorHandler"/></el-dialog>
</template><script  lang="ts" setup>
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'
import { onMounted, ref, watch } from 'vue';
import Tool from '../../../../global';
import { FileCenterModel } from '../class/FileCenterModel';
import { ElMessage } from 'element-plus';
const UploadImgServerUrl = new Tool().UploadImgServerUrl
const DownloadImgServerUrl = new Tool().DownloadImgServerUrl
const props = defineProps({lookFileVisible: Boolean,infoLookFile: FileCenterModel
})
//defineEmits用于定义回调事件，里面是数组，可以定义多个事件
const emits = defineEmits(["CloselookFile"])
const handleClose = (done: () => void) => {emits("CloselookFile")
}
// const docx=ref('a7285e21-d108-4887-a7cf-04455e141003.docx');// 'http://xxx.com/test6.docx', //设置文档网络地址，可以是相对地址
// const excel=ref('cd0d46a9-971f-47c8-af5f-ba6e796d511e.xls');//: 'http://xxx.com/test3.xls', //设置文档网络地址，可以是相对地址
// const pdf=ref('');//: 'http://xxx.com/test1.pdf'
const currentAttachment = ref({type: 'docx',src: '',
})
//监听
watch(() => props.infoLookFile,(newInfo, oldInfo) => {// console.log(newInfo,'>>>>>>>>>>>>>>>>>>>>>>>')if (newInfo != undefined) {let currInfo: FileCenterModel = (JSON.parse(newInfo as any)) as FileCenterModelcurrentAttachment.value.type = currInfo.fileSuffix;currentAttachment.value.src = currInfo.fileUrl;} else {}}
);
const renderedHandler =() => {ElMessage({message: '文件渲染完成！',type: 'success',})console.log("渲染完成")
}
const errorHandler = (err) => {ElMessage({message: '文件渲染失败',type: 'error',})console.log("渲染失败",err)
}
onMounted(() => {})
</script>

5、调用

<template><lookFileVue :lookFileVisible="lookFileVisible" :infoLookFile="infoLookFile" @CloselookFile="CloselookFile"></lookFileVue>
</template><script lang="ts" setup>import { reactive, ref, onMounted, toRaw, watch } from 'vue'import lookFileVue from '../FileCenter/components/LookFile.vue'//查看文件
const lookFileVisible = ref(false)
const infoLookFile = ref()
const lookFile = (row: FileCenterModel) =>{// downfile(row)// down(row.fileUrl, row.fileName, row.id)// console.log("查看文件地址", row)lookFileVisible.value = trueinfoLookFile.value = JSON.stringify(row)
}
const CloselookFile = () => {lookFileVisible.value = falseinfoLookFile.value = undefined
}
</script>