klp-oa/klp-ui/src/components/FilePreview/preview/xlsx/index.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>