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 '@vue-office/pptx/lib/index.css';
// http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.pptx
// const url = ref('');
const pptx = ref('/pptx/66f3cfd95e364a239d8036390db658ae.pptx');
const pptStyle = ref({
  height: 'calc(100vh - 100px)',
  width: '100%',
  margin: 'auto',
  background: '#ffffff',
});
const renderedHandler = () => {
  console.warn('渲染完成');
};
const errorHandler = (err) => {
  console.error(`渲染失败:${err}`);
};
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) {
        pptx.value = `/pptx/${data}`; // 更新 docx 的值
      }
      // url.value = drawerApi.getData<Record<string, any>>();
    }
  },
});
</script>
<template>
  <Drawer title="文档预览" :footer="false">
    <VueOfficePptx
      :src="pptx"
      :style="pptStyle"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </Drawer>
</template>

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