PDF 投屏

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

PDF投屏

• 播放
• 退出
• 上一页
• 下一页
• 放大
• 缩小
• 获取总页数

快速接入

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

控件集成

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

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

• 播放（进入播放模式）

• 暂停（退出播放模式）

• 上一页

• 下一页

• 放大(最大放大至 400)

• 缩小(最小缩小至 1)

• 获取总页数

参考代码

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