展示文件

当用户使用互动白板时，会需要展示 DOC、DOCX、PDF、PPT、PPTX 等不同格式的文件。声网互动白板 SDK 提供展示文件完整内容的能力，你可以构建多个场景，在每个场景中通过指定 URL 插入并展示一张静态图片或动态 HTML 网页，从而实现文件展示效果，例如按顺序播放 PPT。

技术原理

在声网互动白板中展示文件的基本流程如下：

将待展示的源文件分页转换成一组图片或网页，上传至你的服务器或第三方云存储，生成一组公网可访问的 URL。
创建一组场景，将图片或网页的 URL 按顺序分别插入每个场景中。
自定义按钮，并调用切换场景 API，通过点击按钮切换场景，实现分页展示文件的效果。

将源文件转换为图片或网页时，你需要特别注意以下几点：

确保转换后的图片或网页格式正确。

目前声网互动白板 SDK 支持在场景中插入并展示的图片或网页格式如下：
- PNG、JPG/JPEG、WEBP 格式的静态图片。
- 由 PPT、PPTX、DOC、DOCX、PDF 格式的源文件转换成的 PNG、JPG/JPEG、WEBP 格式的静态图片。你可以自行转换，也可以使用声网互动白板的静态文档转换服务。
- 由 PPTX 格式的源文件转换成的 HTML 网页。你必须使用声网互动白板的动态文档转换服务进行转换。
确保图片或网页的访问权限。

你需要确保转换后的图片或网页可通过公网访问；此外，如果存储图片或网页的服务器与你的 Web 应用域名不同，你需要配置跨源资源共享（CORS）。否则，你的 Web 应用服务将无法访问并加载这些图片或网页。

前提条件

开始前，请确保满足以下条件：

完成文档转换，并生成一组图片或网页的 URL 地址。如果你需要使用声网互动白板的文档转换功能，详见文档转换服务。
了解场景的基本规则和操作。详见场景概览和管理场景。
在项目中集成声网互动白板 SDK 并加入房间。详见加入白板房间。

实现文件展示

下面在加入白板房间的示例项目基础上添加代码，介绍如何构建多个场景，展示一个六页、带动画效果的 PPTX 文件。

将 PPTX 源文件上传至第三方云存储，调用发起文档转换，创建一个动态文档转换任务，将 PPTX 文件按页转换为 HTML 网页。
调用查询转换任务进度，从响应包体的 previews 参数中获取转换生成的 HTML 网页的 URL 地址。
在加入白板房间的 index.js 文件中添加如下行，构建新场景并实现场景切换：

JavaScript
var whiteWebSdk = new WhiteWebSdk({
    appIdentifier: "RMmxxxxAQ", // 你的 AppIdentifier
});
 
var joinRoomParams = {
    uuid: "a7xxxxx69", // 房间的 UUID
    roomToken: "NETLESSROOM_YWxxxxjk", // Room Token
};
 
whiteWebSdk.joinRoom(joinRoomParams).then(function(room) {
 
    room.bindHtmlElement(document.getElementById("whiteboard"));
    // 指定待展示的 PPT 页面的宽（px）、高（px）和 URL 地址，构建一组新场景。
    var width = 1280;
    var height = 720;
    var imageURLs = [
        "pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016xxx82/19.slide",
        "pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016xxx82/20.slide",
        "pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016xxx82/21.slide",
        "pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016xxx82/22.slide",

展开全部 68 行

在 index.html 文件中添加如下代码，将切换场景的按钮加载到页面上：

html
<!DOCTYPE html>
<html>
    <head>
        <script src="https://sdk.netless.link/white-web-sdk/2.13.11.js"></script>
        <script src="./index.js"></script>
 
    </head>
    <body>
        <div id="whiteboard" style="width: 100%; height: 100vh;">
        </div>
		<!--定义场景切换按钮的样式，并将其添加到网页上-->
        <div style="display: inline-block;">
        <div id="nextpage" class="Next" style="width: 50px; border: 1px solid lightskyblue;display: inline-block;position: fixed; bottom: 400px;">
            下一页
        </div>
        <div id="prepage" class="Prev" style="width: 50px; border: 1px solid lightskyblue;display: inline-block;position: fixed; bottom: 430px;">
            上一页
        </div>
    </div>
    </body>

展开全部 21 行

保存修改后重新用浏览器打开 index.html 文件，你可以看到 PPTX 文件的首页。点击下一页按钮，可以按顺序播放 PPTX 文件，并且可以看到源文件中的动画效果。

API 参考

互动白板 Web SDK API：

互动白板文档转换 RESTful API：

技术原理​

前提条件​

实现文件展示​

API 参考​

技术原理

前提条件

实现文件展示

API 参考