主题
PDF 投屏
在智能投屏场景中,通过接入在线预览编辑服务,可以轻松实现对 PDF 的播放、控制等功能。
快速接入
在 webview 环境下,集成最新版本的 JSSDK 代码,生成 sdk 实例并挂载到目标容器中,即可对目标 PDF 进行快速预览。完整的接入流程请参考快速开始。
控件集成
投屏场景中,不仅要实现对 PDF 的预览,还需要能够与 PDF 进行一些简单的交互。用户通过应用提供的功能控件,对 PDF 进行播放、暂停、翻页等常见操作。依托于强大的PDF API,我们能轻而易举的实现这些功能。
这里我们列举一些常见的 PDF 操作:
参考代码
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>