vue-vben-admin/packages/effects/common-ui/src/ui/ppt/ppt-perview.vue

<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import VueOfficePptx from '@vue-office/pptx';
import { message } from 'ant-design-vue';

// import '@vue-office/pptx/lib/index.css';
// http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.pptx
// const url = ref('');
const isLoading = ref(false); // 新增：加载状态变量
const pptx = ref('/pptx/66f3cfd95e364a239d8036390db658ae.pptx');
const pptStyle = ref({
  height: 'calc(100vh - 100px)',
  width: '100%',
  margin: 'auto',
  background: '#ffffff',
});
const renderedHandler = () => {
  isLoading.value = false; // 文档渲染完成，关闭加载状态
  message.success('渲染完成');
};
const errorHandler = () => {
  isLoading.value = false; // 出错时也关闭加载状态
  message.error('渲染失败');
};
const [Drawer, drawerApi] = useVbenDrawer({
  onCancel() {
    drawerApi.close();
  },
  onClosed() {
    drawerApi.setState({ overlayBlur: 0, placement: 'right' });
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = drawerApi.getData<Record<string, any>>();
      if (data) {
        isLoading.value = true; // 开始加载文档，开启加载状态
        pptx.value = `/pptx/${data}`; // 更新 pptx 的值
      }
      // url.value = drawerApi.getData<Record<string, any>>();
    }
  },
});
</script>
<template>
  <Drawer title="文档预览" :footer="false">
    <div v-if="isLoading" class="loading-overlay">正在加载文档，请稍候...</div>
    <VueOfficePptx
      :src="pptx"
      :style="pptStyle"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </Drawer>
</template>

<style scoped>
.pptx-preview-wrapper {
  background: #fff;
}
</style>