· notes · 7 min 阅读
如何使用 wpsjs 创建右键功能菜单
使用 wpsjs 在 WPS 表格中实现自定义右键菜单与事件处理。
在 WPS 加载项开发中,右键菜单是非常实用但相对容易被忽略的一项能力。通过自定义右键菜单,可以根据用户当前的选区状态,动态提供更贴合业务场景的操作入口,从而显著提升表格处理效率。
本文将通过一个完整示例,演示如何基于 wpsjs 为 WPS 表格(Spreadsheet) 添加自定义右键功能菜单。内容涵盖右键菜单的 XML 配置方式、菜单显示条件的判断逻辑,以及右键点击事件触发后的业务处理流程。同时,示例中结合后端接口调用,对选区内的超链接进行批量处理,并将处理结果自动回填到指定单元格中。
通过阅读本文,你可以系统掌握 wpsjs 右键菜单从配置、开发、调试到发布的完整实现流程,适合用于内部工具开发、数据预处理自动化,以及需要扩展 WPS 表格交互能力的实际业务场景。
一、环境搭建
请确保本机已安装较新版本的 WPS Office,并具备较新的 Node.js 环境,推荐在 Windows 环境下进行测试。
- 全局安装
wpsjs包,npm i wpsjs -g。 - 使用
wpsjs创建项目wpsjs create。 - 按照命令行提示完成项目创建。以下示例基于 Vue 框架,作用对象为 表格文件。
二、右键菜单按钮的添加
1. 配置右键菜单
编辑 public/ribbon.xml 文件,添加右键菜单相关配置:
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
<!-- 功能区核心配置 调试保留,发布时删除-->
<!-- <ribbon startFromScratch="false">
<tabs>
<tab id="wpsAddinTab" label="wps加载项示例">
</tab>
</tabs>
</ribbon> -->
<!-- 右键菜单核心配置 -->
<contextMenus>
<!-- 文字文档文本区域右键(包含超链接的区域) -->
<contextMenu idMso="ContextMenuCell">
<!-- 分隔线 -->
<menuSeparator id="MyLinkSeparator" getVisible="ribbon.IsOnHyperlink" />
<!-- 自定义超链接右键菜单项(仅超链接上显示) -->
<button id="MyLinkBtn1"
label="预处理超链接"
onAction="ribbon.OnHyperlinkMenuClick"
getVisible="ribbon.IsOnHyperlink" />
</contextMenu>
</contextMenus>
</customUI> 2. 添加右键菜单逻辑
编辑 src/components/ribbon.js 文件,补充右键菜单对应的业务逻辑:
/**
* 核心:判断当前右键位置是否为超链接
* @returns {boolean} 是超链接返回true,否则返回false
*/
function IsOnHyperlink() {
try {
const app = window.Application
const selection = app.Selection
if (!selection) return false
const links = selection.Hyperlinks
return !!(links && links.Count > 0)
} catch (e) {
return false
}
}
/**
* 超链接右键菜单点击事件处理
* @param {Object} control 菜单项对象(包含id等信息)
*/
function OnHyperlinkMenuClick() {
const app = window.Application
const selection = app.Selection
const cells = getLinkedCells(selection)
if (cells.length === 0) {
alert('选区中没有可用链接')
}
// 目标列:右侧一列
const targetColOffset = 1
for (const cell of cells) {
const targetCell = app.ActiveSheet.Cells.Item(cell.row, cell.col + targetColOffset)
callApi({
url: cell.address
})
.then((apiResult) => {
// 清空原有超链接(WPS JS 固定写法)
if (targetCell.Hyperlinks.Count > 0) {
targetCell.Hyperlinks.Item(1).Delete()
}
// API返回有效结果时设置超链接
targetCell.Value2 = ''
if (apiResult) {
targetCell.Hyperlinks.Add({
Anchor: targetCell, // 绑定超链接的单元格
Address: apiResult, // 超链接地址
TextToDisplay: apiResult // 显示文本
})
}
})
.catch(() => {
targetCell.Value2 = 'API失败'
})
}
return true
}
function callApi(data) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://192.168.2.1:3000/api/task/direct', true)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
resolve(xhr.responseText)
} catch (e) {
reject(e)
}
} else {
reject(new Error('API error'))
}
}
}
xhr.send(JSON.stringify(data))
})
}
function getLinkedCells(selection) {
const result = []
const links = selection.Hyperlinks
if (!links || links.Count === 0) return result
for (let i = 1; i <= links.Count; i++) {
const link = links.Item(i)
const range = link.Range
result.push({
row: range.Row,
col: range.Column,
text: range.Text,
address: link.Address
})
}
return result
}
//这些函数是给wps客户端调用的
export default {
IsOnHyperlink,
OnHyperlinkMenuClick
} 三、调试与发布
- 使用
wpsjs debug启动 WPS Office 调试模式,打开一个包含超链接的表格文件,右键点击超链接单元格,选择 “预处理超链接”。此时,右侧相邻列会显示处理后的结果。 - 调试确认无误后,执行
wpsjs build进行打包,选择 在线打包,并将生成的文件夹部署到可访问的服务器上。例如,部署后的访问地址为:http://192.168.2.2:8080/。 - 使用
wpsjs publish进行发布,按照提示填写上述在线地址http://192.168.2.2:8080/。发布完成后,会生成wps-addon-publish/publish.html文件。 - 将
publish.html文件分发给最终用户。用户通过浏览器打开该文件,并按照提示完成加载项安装即可使用。
四、注意事项
- 本教程基于
wpsjs@2.2.3与WPS Office@12.1.0.24034编写,请留意后续版本更新可能带来的差异。 - 示例仅适用于 表格 类型,不包含文字文档等其他类型。
- WPS 加载项 功能位于
工具菜单中,使用前需登录 WPS 账号。 - 请确保所创建的加载项处于 启用状态。
- 若涉及接口调用,请确保服务端已正确配置 跨域(CORS),以避免请求失败。
分享:
2