feat(文件预览): 添加对PDF、Word和Excel文件的预览支持

添加新的文件预览组件,支持PDF、Word(docx)、Excel(xlsx/xls)文件类型预览
重构图片预览为独立组件,并添加相关依赖包
This commit is contained in:
砂糖
2026-04-10 08:42:59 +08:00
parent 255a6dc616
commit a19c4e4eaf
7 changed files with 482 additions and 94 deletions

View File

@@ -0,0 +1,38 @@
<template>
<div class="xlsx-preview">
<vue-office-excel :src="src" @render-error="handleExcelError" />
</div>
</template>
<script>
import VueOfficeExcel from '@vue-office/excel';
import '@vue-office/excel/lib/index.css';
export default {
name: "XlsxPreview",
components: {
VueOfficeExcel
},
props: {
src: {
type: String,
required: true,
description: "Excel文件的URL或路径"
}
},
methods: {
handleExcelError(err) {
console.error('excel预览失败:', err);
this.$message.error('Excel预览失败请下载查看');
}
}
};
</script>
<style scoped>
.xlsx-preview {
width: 100%;
height: 70vh;
overflow-y: auto;
}
</style>