当前位置：首页 > news >正文

vue3 查看word pdf excel文件

news 2025/7/12 10:46:04

也是在网上找的基础上修改的可以直接使用

npm install @vue-office/docx
npm install @vue-office/excel
npm install @vue-office/pdf

<template><divclass="Office-Preview"v-loading="loading"element-loading-text="文件加载中..."><VueOfficeDocxv-if="fileType === 'docx'":src="fileUrl"@rendered="rendered"@error="onError"></VueOfficeDocx><VueOfficeExcelv-if="fileType === 'excel'":src="fileUrl"@rendered="rendered"@error="onError"></VueOfficeExcel><VueOfficePdfv-if="fileType === 'pdf'":src="fileUrl"@rendered="rendered"@error="onError"></VueOfficePdf><el-emptyv-if="fileType === 'errType'"image=""description="文件格式不规范":image-size="300"></el-empty><el-emptyv-if="fileType === 'loadErr'"image=""description="文件加载失败":image-size="300"></el-empty></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';// 引入 VueOffice 相关组件
import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel';
import '@vue-office/excel/lib/index.css';
import VueOfficePdf from '@vue-office/pdf';// 使用 useRoute 获取链接参数
const route = useRoute();
const fileUrl = ref(route.query.url || ''); // 从 URL 参数中获取 fileUrl// 定义响应式数据
const fileType = ref('');
const loading = ref(true);const init = () => {if (!fileUrl.value) {console.error('文件为空');loading.value = false;return;}const fileName = fileUrl.value.split('/').pop();const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);if (fileExtension === 'doc' || fileExtension === 'docx') {fileType.value = 'docx';} else if (fileExtension === 'xls' || fileExtension === 'xlsx') {fileType.value = 'excel';} else if (fileExtension === 'pdf') {fileType.value = 'pdf';} else if (fileExtension === 'ppt' || fileExtension === 'pptx') {fileType.value = 'ppt';} else {fileType.value = 'errType';loading.value = false;}
};// 渲染和错误处理方法
const rendered = () => {console.log('渲染完成');loading.value = false;
};const onError = () => {console.error('加载出错');loading.value = false;fileType.value = 'loadErr';
};// 使用 Vue 3 的 onMounted 生命周期钩子
onMounted(() => {init();
});
</script><style scoped lang="scss">
.Office-Preview {overflow-y: scroll;height: 100%;
}
</style>