admin-sjzx/src/components/PreviewFile/index.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" />
        <vue-office-pdf v-if="url.includes('.pdf')" :src="url" />
        <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]
// http://192.168.1.22:9009/excelreport/onlineReport/%E7%94%B5%E8%83%BD%5B%E5%91%8A%5D2024%E5%B9%B41%E5%8F%B7-%E5%BC%A0%E5%AE%B6%E5%8F%A3%E5%9C%B0%E5%B8%82%20%E7%94%B5%E8%83%BD%E8%B4%A8%E9%87%8F%E6%8A%80%E6%9C%AF%E7%9B%91%E7%9D%A3%E5%91%8A%E8%AD%A6%E5%8D%95.docx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20240807%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240807T021320Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=0173318ad09fa6cc9067123b6997f423c692c820ef9e185ca7dda300e5f7853c
// const url = '/api-docx/excelreport' + currentRoute.value.href?.split('?')[1]
onMounted(() => {
    console.log()
})
</script>
<style lang="less" scoped></style>