EasyIT Office PPTX Preview Component

一个基于Vue3的PPT预览组件，支持.pptx文件预览，EasyIT Office套件的一部分，从chy-pptist项目提取并优化。

特性

• 🎯 轻量级：只包含预览功能，不包含编辑功能
• 📱 响应式：支持移动端和桌面端
• 🎨 可配置：支持自定义样式、尺寸、控制选项
• 🔧 类型安全：完整的TypeScript支持
• 🚀 易于集成：简单的API接口
• 📄 多格式支持：支持文本、图片、形状、线条、图表、表格、视频、音频、LaTeX等元素

安装

npm install easyit-office-pptx-preview

快速开始

基础用法

方法一：使用文件上传

<template>
  <div>
    <input type="file" @change="handleFileChange" accept=".pptx" />
    <PPTPreview 
      :file="selectedFile" 
      :options="previewOptions"
      @load="onPPTLoad"
      @slideChange="onSlideChange"
      @error="onError"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PPTPreview } from 'easyit-office-pptx-preview'
import type { PPTData } from 'easyit-office-pptx-preview'

const selectedFile = ref<File | null>(null)
const previewOptions = ref({
  width: 800,
  height: 600,
  showControls: true,
  showThumbnails: true,
  autoPlay: false,
  loop: false
})

const handleFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files[0]) {
    selectedFile.value = target.files[0]
  }
}

const onPPTLoad = (data: PPTData) => {
  console.log('PPT加载成功:', data)
}

const onSlideChange = (index: number) => {
  console.log('切换到幻灯片:', index + 1)
}

const onError = (error: Error) => {
  console.error('加载失败:', error)
}
</script>

方法二：使用URL地址

<template>
  <div>
    <input v-model="pptUrl" type="url" placeholder="请输入PPT文件URL" />
    <PPTPreview 
      :url="pptUrl" 
      :options="previewOptions"
      @load="onPPTLoad"
      @slideChange="onSlideChange"
      @error="onError"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PPTPreview } from 'easyit-office-pptx-preview'
import type { PPTData } from 'easyit-office-pptx-preview'

const pptUrl = ref('https://oss.qyyi.com/测试文档.pptx')
const previewOptions = ref({
  width: 800,
  height: 600,
  showControls: true,
  showThumbnails: true,
  autoPlay: false,
  loop: false
})

const onPPTLoad = (data: PPTData) => {
  console.log('PPT加载成功:', data)
}

const onSlideChange = (index: number) => {
  console.log('切换到幻灯片:', index + 1)
}

const onError = (error: Error) => {
  console.error('加载失败:', error)
}
</script>

使用PPT数据对象

<template>
  <PPTPreview 
    :data="pptData" 
    :options="previewOptions"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PPTPreview } from 'easyit-office-pptx-preview'
import type { PPTData } from 'easyit-office-pptx-preview'

const pptData = ref<PPTData>({
  title: '示例演示文稿',
  width: 800,
  height: 600,
  theme: {
    themeColors: ['#3b82f6', '#ef4444', '#10b981'],
    fontName: 'Microsoft YaHei',
    fontColor: '#333333'
  },
  slides: [
    {
      id: 'slide-1',
      background: {
        type: 'solid',
        color: '#ffffff'
      },
      elements: [
        {
          id: 'text-1',
          type: 'text',
          left: 100,
          top: 100,
          width: 600,
          height: 100,
          rotate: 0,
          content: '<p>欢迎使用PPT预览组件</p>',
          defaultFontName: 'Microsoft YaHei',
          defaultColor: '#333333'
        }
      ]
    }
  ]
})

const previewOptions = ref({
  width: 1000,
  height: 750,
  showControls: true,
  autoPlay: true,
  loop: true
})
</script>

API 文档

PPTPreview Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | data | PPTData \| undefined | undefined | PPT数据对象 | | file | File \| string \| undefined | undefined | PPT文件 | | url | string \| undefined | undefined | PPT文件的URL地址，支持HTTP/HTTPS链接 | | options | PPTPreviewOptions \| undefined | undefined | 预览选项 | | onSlideChange | (index: number) => void | - | 幻灯片切换回调 | | onLoad | (data: PPTData) => void | - | PPT加载完成回调 | | onError | (error: Error) => void | - | 错误回调 |

PPTPreviewOptions

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | width | number | 800 | 预览区域宽度 | | height | number | 600 | 预览区域高度 | | showControls | boolean | true | 是否显示控制栏 | | showThumbnails | boolean | true | 是否显示缩略图 | | autoPlay | boolean | false | 是否自动播放 | | loop | boolean | false | 是否循环播放 | | theme | Partial<PPTTheme> | undefined | 主题配置 |

事件

| 事件名 | 参数 | 描述 | |--------|------|------| | slideChange | index: number | 幻灯片切换时触发 | | load | data: PPTData | PPT加载完成时触发 | | error | error: Error | 发生错误时触发 |

键盘快捷键

| 快捷键 | 功能 | |--------|------| | ← / ↑ | 上一张幻灯片 | | → / ↓ / 空格 | 下一张幻灯片 | | Enter | 开始/暂停自动播放 | | Esc | 关闭缩略图/停止播放 |

支持的元素类型

文本元素 (Text)

• 富文本内容
• 字体、颜色、大小
• 边框、阴影
• 垂直文本

图片元素 (Image)

• 图片显示
• 翻转效果
• 边框、阴影
• 裁剪路径

形状元素 (Shape)

• SVG路径
• 填充色、渐变
• 文本内容
• 边框、阴影

线条元素 (Line)

• 直线、折线
• 箭头标记
• 样式设置

图表元素 (Chart)

• 柱状图、折线图
• 饼图、散点图
• 主题色配置

表格元素 (Table)

• 单元格合并
• 样式设置
• 边框配置

视频元素 (Video)

• 视频播放
• 封面设置
• 播放控制

音频元素 (Audio)

• 音频播放
• 播放控制
• 图标显示

LaTeX元素 (Latex)

• 数学公式
• 符号渲染

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 类型检查
npm run type-check

许可证

MIT License

贡献

欢迎提交Issue和Pull Request！

更新日志

v1.0.0

• 初始版本发布
• 支持.pptx文件解析
• 支持多种元素类型渲染
• 提供完整的预览功能