WebOffice 开放平台主题
实例对象
实例对象指的是您调用初始化函数后返回的 instance 实例。该实例内封装了一些常用的属性和函数供开发者使用。
| 属性 | 类型 | 说明 |
|---|---|---|
object | 文档实例 API 对象 | |
object | 事件处理对象 | |
version | string | 当前 WebOffice SDK 版本 |
mainVersion | string | 当前 WebOffice 版本 |
url | string | 通过此属性可以查看到文档的真实路径值（即 iframe 嵌套的 url） |
iframe | HTMLElement | 当前文档实例 iframe 对象 |
tokenData | Object | 通过 SDK 设置的 token 数据 |
Object | 文档 Tab 工具栏对象 |
| 方法 | 说明 |
|---|---|
主动保存文档 | |
销毁 JSSDK 实例，关闭 WebOffice 文档的显示 | |
加载 Application 对象 | |
设置协作用户光标颜色 | |
动态更新组件状态 | |
执行组件元素命令 |
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）底部工具栏-评论按钮 |
| 组件 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 | 顶部工具栏书签按钮 |