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>
相关推荐
张迅之3 分钟前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦1 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹2 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风2 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵2 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_3 小时前
分片上传-
前端·javascript·状态模式
东北南西3 小时前
手写React状态hook
前端·javascript·react.js