# PDF 投屏

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

<script setup>
import ProjectionDemo from './components/ProjectionDemo.vue'
</script>
<ProjectionDemo />

## 快速接入

在 webview 环境下，集成最新版本的 JSSDK 代码，生成 sdk 实例并挂载到目标容器中，即可对目标 PDF 进行快速预览。完整的接入流程请参考[快速开始](/app-integration-dev/docs-center/online-preview-edit/web/quick-start.html)。

## 控件集成

投屏场景中，不仅要实现对 PDF 的预览，还需要能够与 PDF 进行一些简单的交互。用户通过应用提供的功能控件，对 PDF 进行播放、暂停、翻页等常见操作。依托于强大的[PDF API](/app-integration-dev/docs-center/online-preview-edit/client/PDF/ActivePDF.html)，我们能轻而易举的实现这些功能。

这里我们列举一些常见的 PDF 操作：

- [播放（进入播放模式）](/app-integration-dev/docs-center/online-preview-edit/client/PDF/ActivePDF.html#startplay.html)

- [暂停（退出播放模式）](/app-integration-dev/docs-center/online-preview-edit/client/PDF/ActivePDF.html#endplay.html)

- [上一页](/app-integration-dev/docs-center/online-preview-edit/client/PDF/ActivePDF.html#jumptopage.html)

- [下一页](/app-integration-dev/docs-center/online-preview-edit/client/PDF/ActivePDF.html#jumptopage.html)

- [放大(最大放大至 400)](/app-integration-dev/docs-center/online-preview-edit/client/PDF/ActivePDF.html#zoom.html)

- [缩小(最小缩小至 1)](/app-integration-dev/docs-center/online-preview-edit/client/PDF/ActivePDF.html#zoom.html)

- [获取总页数](/app-integration-dev/docs-center/online-preview-edit/client/PDF/ActivePDF.html#pagescount.html)

## 参考代码

```html
<template>
  <div class="demo">
    <div ref="webofficeEl" class="weboffice__wrapper"></div>
    <ul class="menu">
      <li class="menu__item" @click="startPlay">播放</li>
      <li class="menu__item" @click="endPlay">退出</li>
      <li class="menu__item" @click="jumpToPage(-1)">上一页</li>
      <li class="menu__item" @click="jumpToPage(1)">下一页</li>
      <li class="menu__item" @click="setZoom(1)">放大</li>
      <li class="menu__item" @click="setZoom(-1)">缩小</li>
      <li class="menu__item" @click="getPagesCount">获取总页数</li>
    </ul>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue'

  let jssdk
  const webofficeEl = ref(null)

  onMounted(() => {
    import('../../../../public/web-office-sdk-v1.1.19.es').then(
      WebOfficeSDK => {
        jssdk = WebOfficeSDK.config({
          url: 'https://www.kdocs.cn/l/connyhcfQfp6',
          mount: webofficeEl.value,
          mode: 'simple'
        })
      }
    )
  })

  async function startPlay() {
    await jssdk.ready()
    const app = jssdk.Application

    await app.ActivePDF.StartPlay('active', true, true)
  }

  async function endPlay() {
    await jssdk.ready()
    const app = jssdk.Application

    await app.ActivePDF.EndPlay()
  }

  async function jumpToPage(page) {
    await jssdk.ready()
    const app = jssdk.Application

    // 获取当前页数和总页数
    const [curryPage, totalPages] = await Promise.all([
      app.ActivePDF.CurrentPage,
      app.ActivePDF.PagesCount
    ])
    // page > 0，下一页， page < 0，上一页
    let targetPage = curryPage + page
    if (targetPage > totalPages) {
      targetPage = 1
    }

    // 跳转到指定页
    await app.ActivePDF.JumpToPage(targetPage)
  }

  async function setZoom(zoom) {
    await jssdk.ready()
    const app = jssdk.Application
    // 获取窗口缩放比例
    const result = await app.ActivePDF.Zoom

    // zoom > 0，放大， zoom < 0，缩小
    const targetZoom = zoom > 0 ? result + 20 : result - 20
    // 设置窗口缩放比例
    if (targetZoom <= 400 && targetZoom >= 1) {
      app.ActivePDF.Zoom = targetZoom
    }
  }

  async function getPagesCount() {
    await jssdk.ready()
    const app = jssdk.Application
    // 获取总页数
    const totalPages = await app.ActivePDF.PagesCount
    alert(`总页数: ${totalPages}`)
  }
</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.6);
    color: rgba(255, 255, 255, 0.8);
    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>
```