详情文件预览

src/components/PreviewFile/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <div style="overflow: auto; height: 100vh">
+        <vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
+        <vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url" />
+        <vue-office-pdf v-if="url.includes('.pdf')" :src="url" />
+        <img v-if="url.includes('.png') || url.includes('.jpg') || url.includes('.gif')" :src="url" />
+    </div>
+</template>
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+const { push, options, currentRoute } = useRouter()
+const fileHead = 'http://192.168.1.22:9009/excelreport/supervision/'
+const url = ref('')
+url.value = fileHead + currentRoute.value.href?.split('?')[1]
+// url.value = currentRoute.value.href?.split('?')[1]
+//引入相关样式
+import '@vue-office/excel/lib/index.css'
+//引入VueOfficeDocx组件
+import VueOfficeDocx from '@vue-office/docx'
+import VueOfficeExcel from '@vue-office/excel'
+//引入VueOfficePdf组件
+import VueOfficePdf from '@vue-office/pdf'
+const dialogVisible = ref(false)
+onMounted(() => {
+    console.log()
+})
+</script>
+<style lang="less" scoped></style>