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

<template>
    <div style="overflow: auto; height: 100vh" v-if="flag">
        <vue-office-docx v-if="urlName.includes('.doc') || urlName.includes('.docx')" :src="url" />
        <vue-office-excel v-if="urlName.includes('.xls') || urlName.includes('.xlsx')" :src="url" :options="excelOptions" />
        <!-- <vue-office-pdf v-if="urlName.includes('.pdf')" :src="url" /> -->
        <iframe v-if="urlName.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
        <img
            v-if="urlName.includes('.png') || urlName.includes('.jpg') || urlName.includes('.gif') || urlName.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'
import { downloadFile } from '@/api/system-boot/file'
const { push, options, currentRoute } = useRouter()
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
// const url = 'http://192.168.1.22:9009/excelreport' + currentRoute.value.href?.split('?')[1]
const url = ref('')
const excelOptions = ref({})
const urlName = ref('')
const flag = ref(false)
const init = () => {
    flag.value = false
    let urls = currentRoute.value?.href?.split('?')[1]
    urlName.value = urls
    downloadFile({ filePath: urls }).then((res: any) => {
        let blob = new Blob([res], {
            type: urls.includes('.pdf')
                ? 'application/pdf'
                : urls.includes('.zip')
                ? 'application/zip'
                : urls.includes('.doc')
                ? 'application/msword'
                : urls.includes('.docx')
                ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                : urls.includes('.xls')
                ? 'application/vnd.ms-excel'
                : urls.includes('.xlsx')
                ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                : urls.includes('.png')
                ? 'image/png'
                : urls.includes('.jpeg')
                ? 'image/jpeg'
                : urls.includes('.jpg')
                ? 'image/jpg'
                : ''
        })
        url.value = window.URL.createObjectURL(blob)
        flag.value = true
    })
}
// if(VITE_FLAG){
//      url.value = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1]
//      excelOptions.value = ref({
//         xls: currentRoute.value.href?.split('?')[1].split('.')[1] == 'xls' ? true : false
//     })
// }else{
//     //下载

// }

onMounted(() => {
    init()
    console.log()
})
</script>
<style lang="less" scoped></style>