Skip to content

页面定制

页面定制,是指我们可以通过 API 来控制页面中的每个元素。

以 Word 为例,我们举几个例子,快速了解什么是页面定制。

案例 1:控制已有组件

如果我们希望控制页面左上角的【更多菜单】按钮,让它不展示出来,那么就可以通过调用 API 来控制。

页面定制

为了更直观的体验,下面通过一个例子来演示如何隐藏左上角的更多菜单,请点击下方代码块右上角的【试一试】小图标:

async function example() {
  await instance.ready()

  const app = instance.Application

  // 页面定制对象:更多菜单
  const moreMenus = await app.CommandBars('MoreMenus')

  // 控制更多菜单隐藏
  moreMenus.Visible = false
}

接下来,我们看一下刚才这个 API 是如何调用的:

  • 表达式.CommandBars(CommandBarId).Visible = false

表达式:文档类型应用对象

在这里,CommandBars 表示我们调用的对象,CommandBarId 表示我们需要控制的元素。

关于页面上更多的可以控制的元素,可以查看 可定制列表

案例 2:自定义组件

我们还可以通过 CommandBars 来自定义组件,设置它的元素图标、标题等属性:

页面定制

async function example() {
  await instance.ready()

  const app = instance.Application

  // 定制元素对象【开始 Tab】
  const controls = await app.CommandBars('StartTab').Controls

  // 添加定制元素:按钮
  const controlButton = await controls.Add(1)
  controlButton.Caption = '按钮' // 设置标题
  // 设置 Icon
  controlButton.Picture =
    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik04LjIxMyAxM0g2LjhsNi42MzYtNi42MzYtNC4yNDMtNC4yNDMtNy4wNyA3LjA3MUw1LjkyOCAxM0g0LjUxNUwxLjA2IDkuNTQ2YS41LjUgMCAwIDEgMC0uNzA3TDguODM5IDEuMDZhLjUuNSAwIDAgMSAuNzA3IDBsNC45NSA0Ljk1YS41LjUgMCAwIDEgMCAuNzA3TDguMjEzIDEzeiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTQuNTM2IDYuMzY0bDQuOTUgNC45NS0uNzA3LjcwNy00Ljk1LTQuOTV6TTQuNTIxIDEzaDEwLjAzdjFINS40OTZ6Ii8+PC9nPjwvc3ZnPg=='
  controlButton.SetFocus(true) // 聚焦该元素
}

更多

定制功能是各个场景都可用的(Word、Excel、PPT、PDF),所以为了避免错乱,后续页面定制相关功能的演示,我们都会以 Word(文字)为例,进行一一展示

CheckAvailable(CommandBarId)

JSSDK: v1.1.10+、WebOffice v2.3.1+ 支持

可以通过 CheckAvailable() 方法来检查 ID 是否可用。

语法

表达式.CommandBars.CheckAvailable(CommandBarId)

表达式:文档类型应用对象

参数

属性数据类型默认值必填说明
CmbID
string
-
需要查询的 commandBarID

返回值

属性数据类型说明
Available
Boolean
是否可用

示例

async function example() {
  await instance.ready()

  const app = instance.Application

  // 检查ID是否可用
  console.log(await app.CommandBars.CheckAvailable('MoreMenus'))
}

CommandBars(CommandBarId)

在定制页面过程中,我们需要指定对应的 CommandBarId 来操作相关组件,所以知道 WebOffice 提供的 CommandBarIds 相关列表尤为重要。

CommandBarIds 划分为 PC 端和 Mobile 端两个大部分。

PC 端和 Mobile 端又可以细划分为 公共、Word(文字)、Excel(表格)、PPT(演示)、PDF 这 5 个部分。

PC 定制部分(Word)

PC 端定制

Mobile 定制部分(Word)

Mobile 端定制

可定制列表-表格

PC

CommandBarId位置
HistoryVersionDivider
右键菜单-历史版本/协作记录分割线
StartTab
开始 Tab
InsertTab
插入 Tab
DataTab
数据 Tab
FormulaTab
公式 Tab
CooperationTab
协作 Tab
ViewTab
视图 Tab
TabStartTab
工具栏-开始按钮
TabInsertTab
工具栏-插入按钮
TabDataTab
工具栏-数据按钮
TabFormulaTab
工具栏-公式按钮
TabCooperationTab
工具栏-协作按钮
TabViewTab
工具栏-视图按钮
TaskPane
任务窗格
ContextMenuHistory
单元格右键-单元格最近的改动
RightMenuHistory
表格-右边菜单-历史记录-单元格最近改动
RightMenuHistoryToady
表格-右边菜单-历史记录-今天的改动
RightMenuHistoryThreeDay
表格-右边菜单-历史记录-最近 3 天的改动
RightMenuHistorySevenDay
表格-右边菜单-历史记录-最近 7 天的改动

Mobile

CommandBarId位置
FormatTab
格式 Tab
InsertTab
插入 Tab
DataTab
数据 Tab
ViewTab
视图 Tab
Keyboard
键盘

可定制列表-PDF

PC

CommandBarId位置
StartTab
工具栏-开始 Tab
AnnoTab
工具栏-批注 Tab
TabStartTab
工具栏-开始按钮
TabAnnoTab
工具栏-批注按钮
TaskPane
任务窗格
PlayModeMenu
播放模式菜单

Mobile

CommandBarId位置
Meeting
底部-会议按钮
PDFMobilePageBar
页码

可定制列表-演示

PC

CommandBarId位置
InsertTab
工具栏-插入 Tab
ReviewTab
工具栏-审阅 Tab
PlayTab
工具栏-播放 Tab
ViewTab
工具栏-视图 Tab
TabInsertTab
工具栏-插入按钮
TabReviewTab
工具栏-审阅按钮
TabPlayTab
工具栏-播放按钮
TabViewTab
工具栏-视图 Tab
TabThumbNumber
母版视图-slide hover 缩略图
TaskPane
任务窗格
PlayComponentToolbar
全屏播放时 toolbar
WPPPcCommentButton
底部工具栏-评论按钮
Comment
审阅 Tab-评论按钮
MeetingEnter
播放 Tab-会议入口
ToolBarFullScreenBtn
全屏播放 toolbar 全屏按钮
ContextDownloadImage
右键-下载原图
TaskbarDownloadImage
右侧工具栏-下载原图
PlayContextCheckImage
播放右键 - 查看原图
FloatMenuCheckImage
选中图片浮动菜单栏 - 查看原图

Mobile

CommandBarId位置
WPPMobileCommentButton
底部工具栏-评论按钮
WPPMobileMarkButton
浮动备注按钮
property
格式 Tab
insert
插入 Tab
comment
评论 Tab
keyboard
键盘
InsertImage
插入图片
WPPMobileComponentToolbar
播放时的 toolbar
WPPMobileThumbnailContainer
播放时的缩略图
WPPMobileTimeStamp
播放时时间显示
FloatMenuDownloadImage
浮动菜单栏-下载图片

可定制列表-公共

PC

CommandBarId位置
TabPrintPreview
工具栏-打印
FloatQuickHelp
右下角帮助(金小獴)
HeaderLeft
头部左侧,头部一共分左、中、右三块区域
HeaderMiddle
头部中部, 头部一共分左、中、右三块区域
HeaderRight
头部右恻, 头部一共分左、中、右三块区域
HistoryRecord
顶部状态栏-历史记录菜单-协作记录
HistoryVersion
顶部状态栏-历史记录菜单-历史版本
MenuPrintPreview
更多菜单-打印按钮
HeaderHistoryMenuBtn
右边菜单-历史版本入口按钮
PreviewDownload
顶部状态栏-历史记录菜单-历史版本-预览版本-下载
MoreMenus
头部-更多菜单

Mobile

CommandBarId位置
Cooperation
状态栏协作头像
More
状态栏更多按钮
Logo
状态栏 Logo
SendButton
顶部工具栏-分享按钮
Invitation
顶部工具栏-邀请按钮

可定制列表-文字

PC

CommandBarId位置
StartTab
工具栏-开始 Tab
InsertTab
工具栏-插入 Tab
ReviewTab
工具栏-审阅 Tab
PageTab
工具栏-页面 Tab
TabStartTab
工具栏-开始按钮
TabInsertTab
工具栏-插入按钮
TabPageTab
工具栏-页面按钮
TabReviewWord
工具栏-审阅按钮
TaskPane
任务窗格(右侧边栏)
ContextMenuConvene
右键-召唤在线协助者
ReviewTrackChanges
审阅-开启修订按钮
BookMark
插入-书签
PanelBookMark
开始 Tab-插入-书签
RightMenuHistory
文字-右边菜单-历史记录-查看最新改动

Mobile

CommandBarId位置
WriterHoverToolbars
文字-底部工具栏
Meeting
底部-会议按钮
Print
底部-打印按钮
FontTab
字体属性面板
Arrange
段落属性面板
Insert
插入对象属性面板
Review
修订评论属性面板
Keyboard
键盘
InsertImage
插入图片