使用PPT预览功能，可以在上传后，不进入房间，即可预览转换效果。
在使用PPT预览功能之前，我们假设你已经上传了PPT并通过轮询转换进度确认PPT已经转换完毕，且拿到了以下信息，如果没有，请先查阅PPT转换
{
"uuid": "2fa009xxxxxxxxxxxxxxxxxca93da2ad",
"type": "dynamic",
"status": "Finish",
"failedReason": "",
"progress": {
"totalPageSize": 10,
"convertedPageSize": 3,
"convertedPercentage": 30,
"convertedFileList": [{
"width": 1024,
"height": 960,
"conversionFileUrl": "xxxx://xxxx.xxx.xx/xxxx.xxx",
"preview": "xxxx://xxxx.xxx.xx/xxxx.xxx",
},{...}],
"currentStep": "Extracting",
}
}
调用previewPPT方法，传入预览渲染的目标 dom 对象。在此方法中若 dom 对象已经被规定了高度和宽度，PPT的展示会被同比缩放，若没有指定宽高，则按照上传PPT的大小进行展示
示例代码：
<div id="example-targer-preview"></div>
import { previewPPT } from "white-web-sdk";
const conversionResult = {
"uuid": "2fa009xxxxxxxxxxxxxxxxxca93da2ad",
"type": "dynamic",
"status": "Finish",
"failedReason": "",
"progress": {
"totalPageSize": 10,
"convertedPageSize": 3,
"convertedPercentage": 30,
"convertedFileList": [{
"width": 1024,
"height": 960,
"conversionFileUrl": "xxxx://xxxx.xxx.xx/xxxx.xxx",
"preview": "xxxx://xxxx.xxx.xx/xxxx.xxx",
}],
"currentStep": "Extracting",
}
}
const userFonts = {
"Times New Roman": "https://字体地址/fontxxx.ttf",
// more...
}
const logger = {
debug: (...conversionResult) => { console.debug(...conversionResult) },
info: (...conversionResult) => { console.info(...conversionResult) },
error: (...conversionResult) => { console.error(...conversionResult) },
warn: (...conversionResult) => { console.warn(...conversionResult) },
}
const config = {
international: {
prePage: "previous page",
nextPage: "next page",
turnTo: "turn page to",
displaySidebar: "display sidebar",
hideSidebar: "hide sidebar",
displayNote: "display note",
hideNote: "hide note",
pageNumber: "page number",
}
}
const previewPPTElement = document.getElementById("example-targer-preview");
previewPPT(conversionResult, previewPPTElement, config, true, userFonts, logger);
传入参数：
international替换预览菜单内的语言，可传入想要替换的文字，可选config.international对象可选键值如下：
| 键值 | 描述 |
|---|---|
| prePage | 用于替换上一页的文字 |
| nextPage | 用于替换下一页的文字 |
| preStep | 用于替换上一步的文字 |
| nextStep | 用于替换下一步的文字 |
| jumpTo | 用于替换跳转到此页的文字 |
| displaySidebar | 用于替换展示侧边栏的文字 |
| hideSidebar | 用于替换隐藏侧边栏的文字 |
| displayNote | 用于替换显示备注的文字 |
| hideNote | 用于替换隐藏备注的文字 |
| pageNumber | 用于替换页码的文字 |
在内部我们使用了一些css类来装饰预览PPT的元素，你可以通过修改全局css类的方式加入自己的CSS，达到个性化展示的目的，以下为类的列表及描述：
| 类名 | 描述 |
|---|---|
ppt-preview-beauty-scroll-bar |
滚动条，在预览图和备注超出容器大小后出现 |
ppt-preview-container |
预览PPT最外层容器，此容器包含菜单栏、PPT功能的主要容器 |
ppt-preview-main-container |
PPT功能的主要容器，包含单页PPT、备注、右侧预览图和控制预览图和备注是否显示的按钮 |
ppt-preview-slide-container |
单页ppt容器 |
ppt-preview-show-note-svg |
控制是否显示备注的svg的样式 |
ppt-preview-show-sidebar-svg |
控制是否显示侧边栏的svg的样式 |
ppt-preview-controls |
最上方按钮的父层div样式 |
ppt-preview-controls-page |
左上方显示页码p元素样式 |
ppt-preview-controls-button |
控制上一页下一页等按钮的样式 |
ppt-preview-controls-input |
转到页码input的样式 |
ppt-preview-sidebar |
侧边栏（略缩图容器）的样式 |
ppt-preview-sidebar-item |
单个图片 + 页码容器的样式 |
ppt-preview-sidebar-img |
预览图的样式 |
ppt-preview-sidebar-span |
左上角页码的样式 |
ppt-preview-note |
备注容器div |
ppt-preview-animation |
左下角控制上一步下一步的容器 |
ppt-preview-animation-svg |
左下角控制上一步下一步的svg图标 |