金山文档开放平台

主题

回到顶部
本页内容

PDF 投屏

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

快速接入

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

控件集成

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

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

示例

在线体验

参考代码 

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