输入搜索…

· notes · 7 min 阅读

如何使用 wpsjs 创建右键功能菜单

使用 wpsjs 在 WPS 表格中实现自定义右键菜单与事件处理。

如何使用 wpsjs 创建右键功能菜单

@neobe

在 WPS 加载项开发中,右键菜单是非常实用但相对容易被忽略的一项能力。通过自定义右键菜单,可以根据用户当前的选区状态,动态提供更贴合业务场景的操作入口,从而显著提升表格处理效率。

本文将通过一个完整示例,演示如何基于 wpsjsWPS 表格(Spreadsheet) 添加自定义右键功能菜单。内容涵盖右键菜单的 XML 配置方式、菜单显示条件的判断逻辑,以及右键点击事件触发后的业务处理流程。同时,示例中结合后端接口调用,对选区内的超链接进行批量处理,并将处理结果自动回填到指定单元格中。

通过阅读本文,你可以系统掌握 wpsjs 右键菜单从配置、开发、调试到发布的完整实现流程,适合用于内部工具开发、数据预处理自动化,以及需要扩展 WPS 表格交互能力的实际业务场景。


一、环境搭建

请确保本机已安装较新版本的 WPS Office,并具备较新的 Node.js 环境,推荐在 Windows 环境下进行测试。

  1. 全局安装 wpsjs 包,npm i wpsjs -g
  2. 使用 wpsjs 创建项目 wpsjs create
  3. 按照命令行提示完成项目创建。以下示例基于 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
}

三、调试与发布

  1. 使用 wpsjs debug 启动 WPS Office 调试模式,打开一个包含超链接的表格文件,右键点击超链接单元格,选择 “预处理超链接”。此时,右侧相邻列会显示处理后的结果。
  2. 调试确认无误后,执行 wpsjs build 进行打包,选择 在线打包,并将生成的文件夹部署到可访问的服务器上。例如,部署后的访问地址为:http://192.168.2.2:8080/
  3. 使用 wpsjs publish 进行发布,按照提示填写上述在线地址 http://192.168.2.2:8080/。发布完成后,会生成 wps-addon-publish/publish.html 文件。
  4. publish.html 文件分发给最终用户。用户通过浏览器打开该文件,并按照提示完成加载项安装即可使用。

四、注意事项

  1. 本教程基于 wpsjs@2.2.3WPS Office@12.1.0.24034 编写,请留意后续版本更新可能带来的差异。
  2. 示例仅适用于 表格 类型,不包含文字文档等其他类型。
  3. WPS 加载项 功能位于 工具 菜单中,使用前需登录 WPS 账号。
  4. 请确保所创建的加载项处于 启用状态
  5. 若涉及接口调用,请确保服务端已正确配置 跨域(CORS),以避免请求失败。
分享:

2

返回文章列表