3020a4244d
新增报表导出文件管理模块，包含后端接口和前端页面 在各类报表页面添加保存报表功能 优化CoilSelector和CoilCard组件显示 调整分页大小和表格高度 统一各产线报表配置 修复文件预览组件高度问题
42 lines
821 B
Vue
42 lines
821 B
Vue
<template>
|
||
<div class="xlsx-preview" :style="{ height: height }">
|
||
<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或路径"
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: "70vh",
|
||
description: "预览区域高度"
|
||
}
|
||
},
|
||
methods: {
|
||
handleExcelError(err) {
|
||
console.error('excel预览失败:', err);
|
||
this.$message.error('Excel预览失败，请下载查看');
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.xlsx-preview {
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
</style> |