WebOffice 开放平台

主题

回到顶部
本页内容

演示投屏

在智能投屏场景中，通过接入在线预览编辑服务，可以轻松实现对演示文稿的播放、控制等功能。

快速接入

在 webview 环境下，集成最新版本的 JSSDK 代码，生成 sdk 实例并挂载到目标容器中，即可对目标文稿进行快速预览。完整的接入流程请参考快速开始。

控件集成

投屏场景中，不仅要实现对演示文稿的预览，还需要能够与文稿进行一些简单的交互。用户通过应用提供的功能控件，对文稿进行播放、暂停、翻页等常见操作。依托于强大的演示 API，我们能轻而易举的实现这些功能。

这里我们列举一些常见的演示文稿操作：

参考代码

html
<template>
  <div class="demo">
    <div ref="webofficeEl" class="weboffice__wrapper"></div>
    <ul class="menu">
      <li class="menu__item" @click="onPlay">播放</li>
      <li class="menu__item" @click="onExit">退出</li>
      <li class="menu__item" @click="onPre">上一页</li>
      <li class="menu__item" @click="onNext">下一页</li>
      <li class="menu__item" @click="onEnlarge">放大</li>
      <li class="menu__item" @click="onShrink">缩小</li>
    </ul>
  </div>
</template>

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

  let instance
  const webofficeEl = ref()

  onMounted(() => {
    import('../../../../public/web-office-sdk-v1.1.19.es').then(
      WebOfficeSDK => {
        instance = WebOfficeSDK.config({
          url: 'https://www.kdocs.cn/l/coJJmHKeHdjd',
          mount: webofficeEl.value,
          mode: 'simple',
          wordOptions: {
            isShowDocMap: false, // 是否开启目录功能，默认开启
            isBestScale: true // 打开文档时，默认以最佳比例显示
          }
        })
      }
    )
  })
  async function onPlay() {
    await instance.ready()
    // 进入幻灯片播放模式
    instance.Application.ActivePresentation.SlideShowSettings.Run()
  }
  async function onExit() {
    await instance.ready()
    instance.Application.ActivePresentation.SlideShowWindow.View.Exit()
  }
  async function onPre() {
    await instance.ready()

    const app = instance.Application

    // 切换到 PPT 全屏播放状态
    await app.ActivePresentation.SlideShowSettings.Run()

    // 切换到下一步动画
    app.ActivePresentation.SlideShowWindow.View.GotoPreClick()
  }
  async function onNext() {
    await instance.ready()

    const app = instance.Application

    // 切换到 PPT 全屏播放状态
    await app.ActivePresentation.SlideShowSettings.Run()

    // 切换到下一步动画
    app.ActivePresentation.SlideShowWindow.View.GotoNextClick()
  }
  async function onEnlarge() {
    await instance.ready()

    const app = instance.Application

    // 文档窗口对象
    const activeWindow = app.ActiveWindow

    // 视图对象
    const view = activeWindow.View

    const zoom = await view.Zoom

    // 设置窗口缩放比例
    view.Zoom = zoom + 20
  }
  async function onShrink() {
    await instance.ready()

    const app = instance.Application

    // 文档窗口对象
    const activeWindow = await app.ActiveWindow

    // 视图对象
    const view = await activeWindow.View

    // 获取窗口缩放比例
    const zoom = await view.Zoom

    // 设置窗口缩放比例
    view.Zoom = zoom - 20
  }
</script>

<style scoped>
  .demo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 997;
    background-color: #fff;
  }
  .weboffice__wrapper {
    height: 100%;
  }
  .menu {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .menu__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
  }
  .menu__item:hover,
  .menu__item:active {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .menu__item + .menu__item {
    margin-left: 12px;
  }
</style>