38 lines
705 B
Vue
38 lines
705 B
Vue
|
<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>
|