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

深色模式

实例对象 ​

实例对象指的是您调用初始化函数后返回的 instance 实例。该实例内封装了一些常用的属性和函数供开发者使用。

属性类型说明
Application
object
文档实例 API 对象
ApiEvent
object
事件处理对象
version
string
当前 WebOffice SDK 版本
mainVersion
string
当前 WebOffice 版本
url
string
通过此属性可以查看到文档的真实路径值（即 iframe 嵌套的 url）
iframe
HTMLElement
当前文档实例 iframe 对象
tokenData
Object
通过 SDK 设置的 token 数据
tabs
Object
文档 Tab 工具栏对象
方法说明
save()
主动保存文档
destroy()
销毁 JSSDK 实例，关闭 WebOffice 文档的显示
ready()
加载 Application 对象
setCooperUserColor()
设置协作用户光标颜色
setCommandBars()
动态更新组件状态
executeCommandBar()
执行组件元素命令

Application ​

文档实例 API 对象，开发者可通过此对象对文档进行 API 调用，实现更多高级操作，详情请参考API 调用。

注意

开发者需要先调用 ready() 函数来加载 Application 对象，然后再进行后续的 API 调用。

ApiEvent ​

事件处理对象，开发者可通过此对象对文档内丰富的交互事件进行监听，详情请参考事件机制。

tabs ​

文档 Tab 工具栏对象。

tabs.getTabs() ​

（PC）获取所有头部 Tab

使用方式 ​

js
const tabs = await instance.tabs.getTabs()

返回数据 ​

js
;[
  { tabKey: 'StartTab', text: '开始' },
  { tabKey: 'InsertTab', text: '插入' },
  { tabKey: 'ReviewTab', text: '审阅', commandBarId: 'TabReviewWord' },
  { tabKey: 'PageTab', text: '页面' }
]

tabs.switchTab() ​

（PC）控制头部 Tab 切换

使用方式 ​

js
await instance.tabs.switchTab({ tabKey: 'InsertTab' }) // 切换到【插入】Tab

参数 ​

js
{
  tabKey: '当前 tabKey 值'
}

save() ​

可以在恰当的时机主动触发保存接口，用来辅助用户保存文件。

使用方式 ​

js
const instance = WebOfficeSDK.init({
  // 必填项
  officeType: WebOfficeSDK.OfficeType.Writer,
  appId: 'xxxxx',
  fileId: 'xxxxx'
})

const result = await instance.save()

返回参数 ​

js
{
  result: 'nochange', // 保存状态
  size: 15302, // 文件大小，单位byte
  version: 16, // 版本
}

状态说明 ​

保存状态说明
ok
版本保存成功，可在历史版本中查看
nochange
文档无更新，无需保存版本
SavedEmptyFile
暂不支持保存空文件 触发场景：内核保存完后文件为空
SpaceFull
空间已满
QueneFull
保存中请勿频繁操作 触发场景：服务端处理保存队列已满，正在排队
fail
保存失败

destroy() ​

当我们不再需要 instance 的时候，可以通过 instance.destroy() 方法，来销毁 iframe 对应的 DOM 节点，从而销毁 JSSDK 实例，关闭 WebOffice 页面的展示。

使用方式 ​

js
instance.destroy()

ready() ​

此函数用于加载 Application 对象，您需要等待此函数调用完成再来使用 Application 对象。

注意

如果您的代码中存在多次ready函数调用的情况，请确保上一次的ready函数已经resolve，然后再进行下一次ready的调用，否则可能会使文档实例多次被加载，最终出现API接口重复调用的情况。

setCooperUserColor() ​

设置协作用户光标颜色。

使用方式 ​

js
await instance.setCooperUserColor([
  {
    userId: 'xxx', // 用户 id
    color: 'red' // 用户光标颜色
  }
])

setCommandBars() ​

动态更新组件状态，接收一个数组，您可以同时对多个组件设置状态。

使用方式 ​

js
const instance = WebOfficeSDK.init({
  officeType: WebOfficeSDK.OfficeType.Writer,
  appId: 'xxxxx',
  fileId: 'xxxxx'
  // 详细配置
})

instance.setCommandBars([
  // 可以配置多个组件
  {
    cmbId: '组件ID',
    attributes: {
      visible: false, // 隐藏组件
      enable: false // 禁用组件， 组件显示但不响应点击事件
    }
  }
])

下面列出目前可用的组件列表：

公共 ​

组件 ID说明
HeaderLeft
（PC）头部左侧， 头部一共分左、中、右三块区域
HeaderRight
（PC）头部右侧， 头部一共分左、中、右三块区域
FloatQuickHelp
右下角帮助（金小獴）
CooperationPanelOwnerInfo
（Mobile）协作列表中当前文档所有者信息
Logo
（Mobile）状态栏 Logo
Cooperation
（Mobile）状态栏协作头像
More
（Mobile）状态栏更多按钮
HistoryVersion
（PC）顶部状态栏-历史记录菜单-历史版本
HistoryRecord
（PC）顶部状态栏-历史记录菜单-协作记录
HistoryVersionDivider
（PC）表格-右键菜单-历史版本/协作记录分割线
SendButton
（Mobile）顶部工具栏-分享按钮
CooperHistoryMenuItem
（Mobile）顶部工具栏-协作记录菜单
TabPrintPreview
（PC）顶部工具栏打印按钮
MenuPrintPreview
（PC）顶部工具栏打印按钮
MobileHeader
（Mobile）顶部工具栏

文字 ​

组件 ID说明
ReviewTrackChanges
编辑、修订状态按钮
TrackChanges
编辑、修订状态下拉选项
ContextMenuConvene
文字右键召唤在线协助者
WriterHoverToolbars
（Mobile）文字-底部工具栏
ReadSetting
（Mobile）文字-状态栏-阅读设置

表格 ​

组件 ID说明
CheckCellHistory
（PC）单元格最近的改动

演示 ​

组件 ID说明
WPPMobileMarkButton
（Mobile）浮动备注按钮
PlayComponentToolbar
全屏播放时 Toolbar
WPPPcCommentButton
（PC）底部工具栏-评论按钮
WPPMobileCommentButton
（Mobile）底部工具栏-评论按钮

PDF ​

组件 ID说明
PDFMobilePageBar
（Mobile）页码

executeCommandBar() ​

通过此方法执行组件元素命令。

使用方式 ​

js
window.onload = async function () {
  const instance = WebOfficeSDK.init({
    officeType: WebOfficeSDK.OfficeType.Writer,
    appId: 'xxxxx',
    fileId: 'xxxxx'
    // 详细配置
  })

  // 注意：执行命令的时候需要等待组件加载完毕
  await instance.ready()

  // 通过调用方法执行组件命令
  instance.executeCommandBar('TabPrintPreview')
}

更多可用组件 ID 可以查看下面列出的内容。

公共 ​

组件 ID说明
TabPrintPreview
顶部工具栏打印按钮

文字 ​

组件 ID说明
BookMark
顶部工具栏书签按钮