vue3在线预览excel表格

在 Vue 3 项目中实现 Excel 表格在线预览。使用vue-office/excel支持 .xlsx/.xls‌该库专为 Vue 3 设计支持 Word、Excel、PPT、PDF 等多种格式集成简单、样式保留较好。‌安装依赖npm install vue-office/excel vue-office/docx vue-office/pptx vue-office/pdf‌引入样式重要import vue-office/excel/lib/index.css‌使用组件templatediv classfile-preview-containerVueOfficeExcelv-if[xlsx, xls].includes(fileType):srcfileSrc:style{ width: 100%, height: 600px, border: 1px solid #e8e8e8 }renderedhandleRenderederrorhandleError//div/templatescript setupimport { ref, computed } from vueimport VueOfficeExcel from vue-office/excelconst props defineProps({src: String // 可为 URL、Blob、File 或 ArrayBuffer})const fileSrc ref(props.src)const fileType computed(() {if (!props.src) return const filename typeof props.src string ? props.src.toLowerCase() : props.src.name?.toLowerCase()if (filename.endsWith(.xlsx)) return xlsxif (filename.endsWith(.xls)) return xlsreturn })const handleRendered () console.log(Excel 渲染完成)const handleError (err) console.error(渲染失败:, err)/script✅ 优点支持.xls和.xlsx保留原始样式无需手动解析。⚠️ 注意需确保文件来源支持跨域或通过后端代理获取二进制流 ‌27。