Files
admin-sjzx/src/components/PreviewFile/index.vue

33 lines
1.3 KiB
Vue

<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" :options="excelOptions" />
<!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url" /> -->
<iframe v-if="url.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
<img v-if="url.includes('.png') || url.includes('.jpg') || url.includes('.gif') || url.includes('.bmp')"
:src="url" />
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
//引入相关样式
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 { push, options, currentRoute } = useRouter()
// const url = 'http://192.168.1.22:9009/excelreport' + currentRoute.value.href?.split('?')[1]
const url = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1]
const excelOptions = ref({
xls: currentRoute.value.href?.split('?')[1].split('.')[1] == 'xls' ? true : false
})
onMounted(() => {
console.log()
})
</script>
<style lang="less" scoped></style>