vue3上传的文件在线查看

1、npm install @vue-office/pdf vue-demi 安装依赖

2、npm install @vue-office/excel vue-demi 安装依赖

3、npm install @vue-office/docx vue-demi 安装依赖

4、编写一个通用组件，现在只支持 .docx,.xlsx,.pdf 格式的文件，其他文件渲染不成功

复制代码

<template>
    <el-dialog v-model="lookFileVisible" title="查看文件" width="70%" :before-close="handleClose">
        
        <vue-office-docx
            v-if="currentAttachment.type === 'docx'"
            :src="DownloadImgServerUrl + currentAttachment.src"
            style="height: 50vh;"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
        <iframe v-if="currentAttachment.type === 'pdf'" style="width:100%;height:50vh;" :src="currentAttachment.src" frameBorder="0"></iframe>
        <vue-office-excel
            :src="DownloadImgServerUrl + currentAttachment.src"
            v-if="currentAttachment.type === 'xlsx'"
            style="height: 50vh;"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
    </el-dialog>
</template>

<script  lang="ts" setup>
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'
import { onMounted, ref, watch } from 'vue';
import Tool from '../../../../global';
import { FileCenterModel } from '../class/FileCenterModel';
import { ElMessage } from 'element-plus';
const UploadImgServerUrl = new Tool().UploadImgServerUrl
const DownloadImgServerUrl = new Tool().DownloadImgServerUrl
const props = defineProps({
    lookFileVisible: Boolean,
    infoLookFile: FileCenterModel
})
//defineEmits用于定义回调事件，里面是数组，可以定义多个事件
const emits = defineEmits(["CloselookFile"])
const handleClose = (done: () => void) => {
    emits("CloselookFile")
}
// const docx=ref('a7285e21-d108-4887-a7cf-04455e141003.docx');// 'http://xxx.com/test6.docx', //设置文档网络地址，可以是相对地址
// const excel=ref('cd0d46a9-971f-47c8-af5f-ba6e796d511e.xls');//: 'http://xxx.com/test3.xls', //设置文档网络地址，可以是相对地址
// const pdf=ref('');//: 'http://xxx.com/test1.pdf'
const currentAttachment = ref({
    type: 'docx',
    src: '',
})
//监听
watch(
    () => props.infoLookFile,
    (newInfo, oldInfo) => {
        // console.log(newInfo,'>>>>>>>>>>>>>>>>>>>>>>>')
        if (newInfo != undefined) {
            let currInfo: FileCenterModel = (JSON.parse(newInfo as any)) as FileCenterModel
            currentAttachment.value.type = currInfo.fileSuffix;
            currentAttachment.value.src = currInfo.fileUrl;
        } else {
            
        }
    }
);
const renderedHandler =() => {
    ElMessage({
        message: '文件渲染完成！',
        type: 'success',
    })
    console.log("渲染完成")
}
const errorHandler = (err) => {
    ElMessage({
        message: '文件渲染失败',
        type: 'error',
    })
    console.log("渲染失败",err)
}
onMounted(() => {
    
})
</script>

5、调用

复制代码

<template>

    <lookFileVue :lookFileVisible="lookFileVisible" :infoLookFile="infoLookFile" @CloselookFile="CloselookFile"></lookFileVue>
</template>

<script lang="ts" setup>

import { reactive, ref, onMounted, toRaw, watch } from 'vue'

import lookFileVue from '../FileCenter/components/LookFile.vue'




//查看文件
const lookFileVisible = ref(false)
const infoLookFile = ref()
const lookFile = (row: FileCenterModel) =>{
    // downfile(row)
    // down(row.fileUrl, row.fileName, row.id)
    // console.log("查看文件地址", row)
    lookFileVisible.value = true
    infoLookFile.value = JSON.stringify(row)
}
const CloselookFile = () => {
    lookFileVisible.value = false
    infoLookFile.value = undefined
}
</script>