wpsjs插件开发-采用js和wps交互功能

本文介绍了WPS加载项的开发,这是一种基于Web技术的解决方案,允许开发者通过JavaScript调用本地WPS并实现文档的各种功能。WPS加载项支持自定义功能区、任务窗格和Web对话框等多种交互方式,具备快速开发、轻量化和跨平台特性。开发过程中,后端采用Python Flask,前端利用wpsjs工具包,提供包括文件操作、通信和事件监听等功能。文章还详细阐述了开发流程,并提供了源码链接和官方接口文档。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

wpsjs-开发wps插件,可以通过web的js调用本地的wps并做指定功能
在这里插入图片描述

WPS 加载项是一套基于 Web 技术用来扩展 WPS 应用程序的解决方案。每个 WPS 加载项都对应打开了一个网页,并通过调用网页中
JavaScript 方法来完成其功能逻辑。 WPS 加载项打开的网页可以直接与 WPS 应用程序进行交互,同时一个 WPS
加载项中的多个网页形成了一个整体, 相互之间可以进行数据共享。 开发者不必关注浏览器兼容的问题,因为 WPS 加载项的底层是以
Chromium 开源浏览器项目为基础进行的优化扩展。 WPS
加载项具备快速开发、轻量化、跨平台的特性,目前已针对Windows/Linux操作系统进行适配。 WPS 加载项功能特点如下:
完整的功能。可通过多种不同的方法对文档、电子表格和演示文稿进行创作、格式设置和操控;通过鼠标、键盘执行的操作几乎都能通过WPS 加载项
完成;可以轻松地执行重复任务,实现自动化; 三种交互方式。 自定义功能区,采用公开的CustomUI标准,快速组织所有功能;
任务窗格,展示网页,内容更丰富; Web 对话框,结合事件监听,实现自由交互。 标准化集成。不影响 JavaScript
语言特性,网页运行效果和在浏览器中完全一致;WPS 加载项开发文档完整,接口设计符合 JavaScript
语法规范,避免不必要的学习成本,缩短开发周期。

开源地址:https://gitee.com/zuiyuewentian/wpsjs_demo.git
官方接口文档:https://qn.cache.wpscdn.cn/encs/doc/office_v11/index.htm

后端采用python-flask开发 技术采用python+flask,主要目的,

从页面调起wps,插件自动化安装,并将文件和相关使用的参数全部传入
监听wps插件上传文件,监听wps传入相关消息和事件 https://gitee.com/zuiyuewentian/wpsjs_demo/tree/master/server

插件开发内容:
https://gitee.com/zuiyuewentian/wpsjs_demo/tree/master/plugin

集成功能:

1.按钮功能开发
2.保存到本地
3.隐藏tab项目
4.插件和前端通信
5.插件和后端通信
6.web调用插件打开文件,传递参数
7.通过插件保存文件到服务器
8.插入书签内容
9.监听wps操作事件等

常用wpsjs命令 准备开发环境 安装wps 安装Node.js
1.管理员权限(如果安装的是wps个人版,不需要管理员权限)启动命令行,通过npm全局安装wpsjs开发工具包: 安装命令: npm install -g wpsjs, 如果之前已经安装了,可以检查下wpsjs版本,更新wpsjs的命令为:npm update -g
wpsjs
2.新建一个wps加载项,假设这个wps加载项取名为"HelloWps"。 输入命令: wpsjs create HelloWps, 会出现如下图的几个选项:
3通过上下方向键可以选择要创建的wps加载项的类型,如果选择“文字”,则创建的加载项会在wps文字程序中加载并运行,
同理选择“电子表格”,则会在wps表格中运行,这里假设我们选择的是“文字”,按Enter健确定。
4.选择示例代码的代码风格类型 wpsjs工具包提供了两种不同代码风格的示例,“无”代表示例代码中都是原生的js及html代码,没有集成vue\react等流行的前端框架。
"Vue"代表生成的示例代码集成了Vue相关的脚手架,在实际的项目中选用Vue基于示例代码可能更适合做工程化的开发,感兴趣的同学可以两种都尝试一下。
这里我们选择“无”,按Enter健确认。
确认后wpsjs工具包会在当前目录下生成一个HelloWps的文件夹,我们进入到此文件夹,可以看到HelloWps的相关代码已经生成:
备注:wpsjs工具包为示例代码中有一个package.json文件,这是node工具标准的配置文件,其中有一个依赖包为wps-jsapi,
这个依赖包是wps支持的全部接口的TypeScript描述,方便在vscode中敲代码时,提供代码联想功能,由于wps接口会跟随业务
需求不断更新,因此当发现代码联想对于有些接口不支持时,通过 npm update --save-dev
wps-jsapi命令定期更新这个包。

总结命令:
1.创建 wpsjs create
2.加载项目 wpsjs join
3.本地调试 wpsjs debug
4.构建离线版 wpsjs build
5.构建发布版 wpsjs publish

安装完成后:

1.先访问publish页面在线安装插件
在这里插入图片描述

2.访问要操作的页面,点击新建客户端打开文件,会自动调起本地的wps并加载test.docx文件
在这里插入图片描述

<think>好的,我现在需要帮用户解决如何使用WPSJS在光标位置插入图片,并且通过弹出窗口选择图片的问题。首先,我得回忆一下WPSJS的API文档,看看相关的接口方法。 用户的需求有两个主要部分:弹出窗口选择图片在光标位置插入图片。首先,弹出窗口选择文件通常需要用到HTML的input元素,但是在WPSJS中,可能无法直接使用前端的文件选择对话框,因为WPSJS主要是在Office插件的上下文中运行,可能需要调用WPS提供的API。不过,可能可以通过嵌入Web页面中的JavaScript来实现,比如在任务窗格中使用HTMLJS,然后与WPS的API交互。 接下来,插入图片到光标位置。WPSJS提供了操作文档的接口,比如Application.ActiveDocument.Selection获取当前选区,然后调用插入图片的方法。需要查找是否有InsertImage或者类似的方法。可能需要用到Range或Shape对象来添加图片。 然后,如何整合这两个部分。首先在任务窗格的HTML中,添加一个按钮,点击后触发文件选择,用户选择图片后,获取文件的路径或数据,然后调用WPSJS的API插入到文档中。 但是,WPSJS的安全性可能限制直接访问本地文件系统,所以可能需要用户先上传图片到某个临时位置,或者通过Base64编码处理图片数据。或者,使用WPS提供的对话框API来选取文件。 另外,WPSJS的API文档可能有特定的方法,比如Application.FileDialog,类似于VBA中的FileDialog对象,允许用户选择文件。然后获取文件路径后,插入到文档中。 具体步骤可能如下: 1. 使用WPSJS API打开文件对话框,让用户选择图片文件。 2. 获取选中的文件路径。 3. 获取当前光标的位置(Selection对象)。 4. 调用插入图片的方法,将图片插入到Selection所在的位置。 需要确认WPSJS是否支持这些操作。可能需要参考WPSJS的官方文档,查找Application.Selection, Application.ActiveDocument.Shapes.AddPicture等方法。 此外,可能还需要处理不同格式的图片,确保WPS支持所选格式,比如PNG、JPG等。 在代码实现方面,可能需要编写类似以下的JavaScript代码: function insertImage() { // 打开文件对话框 var filePath = Application.FileDialog(...).Show(); if (filePath) { var selection = Application.Selection; selection.Shapes.AddPicture(filePath); } } 不过,具体的API调用可能需要调整,比如FileDialog的使用方式,以及插入图片的正确方法。 还需要考虑错误处理,比如用户取消选择文件的情况,或者文件路径无效的情况。 可能遇到的问题包括:WPSJS的API与Office JS API的差异,需要确保使用的对象方法在WPS中有效。另外,权限问题,是否有权限访问用户选择的文件路径。 总结步骤: 1. 创建按钮或其他UI元素触发文件选择。 2. 使用WPSJS的FileDialog API让用户选择图片。 3. 获取文件路径后,使用SelectionShapes.AddPicture方法插入图片。 4. 处理可能的异常错误。 现在需要验证这些步骤是否可行,可能需要查阅WPSJS的文档或示例代码,确认相关API的存在用法。</think>以下是使用WPSJS在光标处插入图片的完整实现方案: ### 一、功能实现步骤 1. **创建自定义任务窗格**: 通过`Ribbon`功能区添加按钮,触发图片插入操作[^1] ```javascript function OnRibbonButtonClick(control) { Application.ShowPane("图片插入面板", "taskpane.html", 300); } ``` 2. **实现文件选择对话框**: 在任务窗格的HTML中使用`<input type="file">`元素 ```html <input type="file" id="filePicker" accept="image/*" style="display:none"> <button onclick="document.getElementById('filePicker').click()">选择图片</button> ``` 3. **获取图片数据**: 通过`FileReader`读取图片文件 ```javascript document.getElementById('filePicker').addEventListener('change', function(e) { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = function(e) { insertImageToDoc(e.target.result); }; reader.readAsDataURL(file); }); ``` 4. **插入图片到光标位置**: 使用WPSJS的API操作选区 ```javascript function insertImageToDoc(base64Data) { const selection = Application.Selection; const shape = selection.Range.Shapes.AddPicture({ FileName: base64Data, LinkToFile: false, SaveWithDocument: true }); shape.WrapFormat.Type = wps.WrapTypeInline; // 设置文字环绕方式 } ``` ### 二、关键参数说明 | 参数 | 说明 | 示例值 | |------|------|-------| | `LinkToFile` | 是否链接到原文件 | false | | `SaveWithDocument` | 是否保存到文档 | true | | `WrapType` | 文字环绕类型 | wps.WrapTypeInline | ### 三、效果优化建议 1. 添加图片压缩处理(建议使用`canvas`压缩) 2. 支持拖拽上传功能 3. 添加进度提示框: ```javascript Application.StatusBar = "正在插入图片..."; // 插入操作完成后 Application.StatusBar = "图片插入完成"; ``` ### 四、错误处理 ```javascript try { // 插入图片代码 } catch (e) { Application.Alert("错误:" + e.message); console.error("插入失败:", e); } ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

搬砖的诗人Z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值