WPS WebOffice 开放平台WPS WebOffice 开放平台 | 开发文档

深色模式

快速开始（旧） ​

下面将通过 5 个步骤介绍如何快速使用 js-sdk。

下载 ​

在使用之前，请先下载最新版本的 js-sdk 代码。下载地址

引用 ​

js-sdk 提供了支持非模块化以及 AMD、CommonJS、ES6 多种模块化规范的包，下面以非模块化方式引用为例，讲解 js-sdk 的快速上手。

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>WebOffice</title>
  </head>
  <body>
    <script src="./web-office-sdk.umd.js"></script>
    <script>
      console.log('引入后可以开始使用 jssdk 了！')
      console.log(WebOfficeSDK)
    </script>
  </body>
</html>

提示

在这份代码中，我们在 HTML 代码中引用了 js-sdk：

<script src="./web-office-sdk.umd.js"></script>

文档URL ​

在试用WebOffice.config 初始化之前，需要根据规则手动拼接文档url。 拼接规则见：获取文档 URL

📢 注意

此处强烈建议使用新版js-sdk >= v1.1.20 。新版本无需拼接URL,更加快捷方便。

初始化 ​

引用之后，就可以通过初始化配置，让 js-sdk 在配置的挂载节点下创建一个 iframe，并自动初始化相关数据和事件。

挂载节点指 js-sdk 插入 iframe 时挂载的节点，如果没有配置挂载节点则默认使用默认节点

提示

请在 DOMContentLoaded 事件被触发后，确保挂载节点存在，再执行初始化操作。

js
window.onload = function () {
  const jssdk = WebOfficeSDK.config({
    url: '在线文档预览地址'
  })

  // 如果需要对 iframe 进行特殊的处理，可以通过以下方式拿到 iframe 的 dom 对象
  console.log(jssdk.iframe)

  // 打开文档结果
  jssdk.on('fileOpen', data => {
    console.log(data.success)
  })
}