admin-sjzx/src/views/pqs/database/case/components/drawer.vue

<template>
    <div>
        <el-drawer v-model="drawer" size="1000px">
            <el-collapse v-model="activeName" accordion>
                <!-- <el-collapse-item title="典型电能质量干扰源" name="1"></el-collapse-item> -->
                <el-collapse-item title="国家电网有限公司企业标准" name="2">
                    <!-- <el-empty description="暂无数据" class="custom-empty iframe" /> -->
                    <div :style="`overflow: auto;`" class="iframe">
                        <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>
                </el-collapse-item>
            </el-collapse>
        </el-drawer>
    </div>
</template>
<script setup lang="ts">
//引入相关样式
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'
import { ref, reactive } from 'vue'
const drawer = ref(false)
const activeName = ref('2')
const num = ref(0)
import { getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
const url = ref('')
const open = (row: any) => {
    // console.log('🚀 ~ open ~ row:', row)
    // url.value = row
    drawer.value = true

    getFileNameAndFilePath({ filePath: row }).then(res => {
        url.value = res.data.url
    })
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
/* 设置iframe的样式 */
.iframe {
    width: 100%; /* 宽度设置为父容器的100% */
    height: calc(100vh - 110px); /* 高度根据需要设置 */
    border: none; /* 移除边框 */
    transform: scale(1); /* 放大200% */
}
/* 自定义 el-empty 的样式 */
:deep(.custom-empty) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* 调整高度 */
    padding: 20px; /* 调整内边距 */
    .el-empty__image {
        display: none; /* 隐藏默认图片 */
    }
    .el-empty__description {
        font-size: 14px; /* 调整字体大小 */
        color: var(--vxe-font-color);
    }
}
</style>