金山文档开放平台

主题

回到顶部
本页内容

演示投屏

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

快速接入

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

控件集成

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

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

示例

在线体验

参考代码 

<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>