wps 插件 java開發示例詳情 - Java,數據,spring,MySQL,數據庫 wx690f565d7bc78 博客

WPS 插件的 Java 開發主要基於 WPS 開放平台的 JS 插件體系 + Java 後端服務 實現（WPS 插件核心運行環境是瀏覽器內核，前端用 JS/HTML，Java 作為後端提供業務邏輯支撐）；若需深度集成（如本地插件），可基於 WPS 提供的 C++ SDK 封裝 Java 調用（JNI）。

以下是最常用的 WPS 在線/桌面插件（前端 JS + 後端 Java） 開發示例，包含核心流程和代碼模板。

一、開發環境準備

WPS 開發者賬號：註冊 WPS 開放平台，創建應用並獲取 AppId/AppSecret；
前端環境：HTML/CSS/JS（WPS 插件基於 ES6+）；
Java 後端環境：JDK 8+、Spring Boot（快速開發）、Maven；
WPS 插件調試工具：WPS 客户端（開啓開發者模式：設置 → 高級 → 開發者模式）。

二、核心架構説明

WPS 插件運行流程：

WPS 客户端 → 加載 JS 插件（前端） → 調用 Java 後端接口（HTTP/JSON） → Java 處理業務（如數據查詢、文件解析） → 返回結果 → 前端渲染到 WPS 界面

三、示例：WPS 表格插件（Java 後端 + JS 前端）

實現功能：在 WPS 表格中點擊插件按鈕，調用 Java 後端接口獲取數據，並填充到表格中。

1. Java 後端（Spring Boot）

（1）pom.xml 依賴

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.15</version>
        <relativePath/>
    </parent>
    <groupId>com.wps.plugin</groupId>
    <artifactId>wps-plugin-demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>wps-plugin-demo</name>
    <description>WPS 插件 Java 後端示例</description>
    
    <dependencies>
        <!-- Spring Web 核心 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- JSON 工具 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.83</version>
        </dependency>
        <!-- 跨域支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-webflux</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

（2）後端接口（數據提供）

package com.wps.plugin.controller;

import com.alibaba.fastjson.JSONObject;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

/**
 * WPS 插件後端接口
 * 跨域註解：允許 WPS 前端插件調用（WPS 客户端內的插件運行在本地，需跨域）
 */
@RestController
@RequestMapping("/wps/api")
@CrossOrigin(origins = "*", maxAge = 3600) // 開發階段允許所有跨域
public class WpsPluginController {

    /**
     * 示例：獲取表格填充數據
     */
    @GetMapping("/getTableData")
    public JSONObject getTableData() {
        JSONObject result = new JSONObject();
        try {
            // 模擬業務數據（實際可從數據庫/文件讀取）
            List<List<Object>> data = new ArrayList<>();
            // 表頭
            data.add(List.of("姓名", "部門", "薪資"));
            // 數據行
            data.add(List.of("張三", "研發部", 15000));
            data.add(List.of("李四", "產品部", 12000));
            data.add(List.of("王五", "銷售部", 18000));

            result.put("code", 200);
            result.put("msg", "success");
            result.put("data", data);
        } catch (Exception e) {
            result.put("code", 500);
            result.put("msg", "獲取數據失敗：" + e.getMessage());
        }
        return result;
    }

    /**
     * 示例：保存表格數據到後端
     */
    @GetMapping("/saveTableData")
    public JSONObject saveTableData(String data) {
        JSONObject result = new JSONObject();
        try {
            // 解析前端傳入的表格數據（實際可寫入數據庫/文件）
            System.out.println("收到WPS表格數據：" + data);
            result.put("code", 200);
            result.put("msg", "數據保存成功");
        } catch (Exception e) {
            result.put("code", 500);
            result.put("msg", "保存失敗：" + e.getMessage());
        }
        return result;
    }
}

（3）啓動類

package com.wps.plugin;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WpsPluginDemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(WpsPluginDemoApplication.class, args);
        System.out.println("WPS 插件後端服務啓動成功：http://localhost:8080/wps/api");
    }
}

2. WPS 前端插件（JS/HTML）

WPS 插件核心是 plugin.json（配置文件） + 前端頁面，以下是關鍵文件：

（1）plugin.json（插件配置，必選）

{
  "name": "WPS-Java插件示例",
  "id": "wps-java-plugin-demo",
  "version": "1.0.0",
  "author": "開發者",
  "description": "WPS表格插件，調用Java後端接口",
  "main": "index.html",
  "permissions": [
    "activeSheet",
    "network"
  ],
  "platform": {
    "win32": {
      "minVersion": "11.1.0.10000"
    },
    "mac": {
      "minVersion": "11.1.0.10000"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "toolbar": [
    {
      "title": "Java插件示例",
      "icon": "icon48.png",
      "cmd": "showMainPanel"
    }
  ]
}

（2）index.html（插件主頁面）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WPS Java 插件示例</title>
    <style>
        body {
            padding: 20px;
            font-size: 14px;
        }
        button {
            padding: 8px 20px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #40a9ff;
        }
    </style>
</head>
<body>
    <h3>WPS表格Java插件示例</h3>
    <button onclick="loadData()">加載後端數據到表格</button>
    <button onclick="saveData()">保存表格數據到後端</button>

    <script src="https://cdn.staticfile.org/jquery/3.6.4/jquery.min.js"></script>
    <script>
        // WPS 表格 API 初始化（WPS 內置對象）
        var wps = window.wps || {};
        var app = wps.Application;
        var activeSheet = app.ActiveWorkbook.ActiveSheet;

        // 加載Java後端數據到表格
        function loadData() {
            $.get("http://localhost:8080/wps/api/getTableData", function (res) {
                if (res.code === 200) {
                    var data = res.data;
                    // 清空表格原有內容
                    activeSheet.UsedRange.ClearContents();
                    // 填充數據到表格（從A1單元格開始）
                    for (var i = 0; i < data.length; i++) {
                        for (var j = 0; j < data[i].length; j++) {
                            var cell = activeSheet.Cells(i + 1, j + 1);
                            cell.Value = data[i][j];
                        }
                    }
                    alert("數據加載成功！");
                } else {
                    alert("加載失敗：" + res.msg);
                }
            }).fail(function (err) {
                alert("接口調用失敗：" + err.statusText);
            });
        }

        // 保存表格數據到Java後端
        function saveData() {
            // 獲取表格已使用區域的數據
            var usedRange = activeSheet.UsedRange;
            var rowCount = usedRange.Rows.Count;
            var colCount = usedRange.Columns.Count;
            var tableData = [];
            // 遍歷單元格獲取數據
            for (var i = 1; i <= rowCount; i++) {
                var rowData = [];
                for (var j = 1; j <= colCount; j++) {
                    rowData.push(activeSheet.Cells(i, j).Value);
                }
                tableData.push(rowData);
            }
            // 調用後端保存接口
            $.get("http://localhost:8080/wps/api/saveTableData", {
                data: JSON.stringify(tableData)
            }, function (res) {
                if (res.code === 200) {
                    alert("數據保存成功！");
                } else {
                    alert("保存失敗：" + res.msg);
                }
            }).fail(function (err) {
                alert("接口調用失敗：" + err.statusText);
            });
        }
    </script>
</body>
</html>

四、插件部署與調試

1. 啓動Java後端

運行 WpsPluginDemoApplication，確保服務啓動在 http://localhost:8080。

2. 部署WPS前端插件

創建插件目錄，放入 plugin.json、index.html、圖標文件；
打開WPS客户端 → 點擊「插件中心」→ 「本地插件」→ 「加載插件」→ 選擇插件目錄；
加載成功後，WPS表格頂部會出現「Java插件示例」按鈕。

3. 調試

點擊插件按鈕，調用「加載後端數據到表格」，即可看到Java後端返回的數據填充到WPS表格中；點擊「保存」可將表格數據提交到Java後端。

五、進階開發（本地C++ SDK + Java JNI）

若需開發本地無網絡依賴的WPS插件（如操作本地文件、調用系統API），可基於WPS C++ SDK封裝JNI接口，讓Java調用C++代碼：

用C++實現WPS SDK的插件接口；
通過JNI將C++方法暴露給Java；
Java實現業務邏輯，調用C++接口與WPS內核交互。

核心步驟（簡化）：

// C++ 端（WPS SDK）
#include <jni.h>
#include "wps_sdk.h"

extern "C" JNIEXPORT void JNICALL
Java_com_wps_plugin_WpsNativeApi_insertText(JNIEnv *env, jobject obj, jstring text) {
    // 調用WPS SDK插入文本到文檔
    const char *textStr = env->GetStringUTFChars(text, 0);
    wps::Application::ActiveDocument::InsertText(textStr);
    env->ReleaseStringUTFChars(text, textStr);
}

// Java 端（JNI調用）
public class WpsNativeApi {
    static {
        System.loadLibrary("wps-native-sdk"); // 加載C++編譯的動態庫
    }
    // 聲明本地方法
    public native void insertText(String text);
    
    // 業務調用
    public void insertHello() {
        insertText("Hello WPS from Java!");
    }
}

六、關鍵注意事項

跨域問題：WPS插件前端運行在本地沙箱，調用Java後端需開啓跨域（@CrossOrigin）；
WPS API 兼容性：不同WPS版本的API可能有差異，需參考WPS 開放平台文檔；
打包發佈：Java後端可打包為Jar/War部署到服務器，前端插件需按WPS規範打包並提交審核；
權限控制：生產環境需限制跨域來源（不要用*），增加接口鑑權（如Token）。

七、參考資源

WPS 開放平台官方文檔（核心API、插件規範）；
Spring Boot 官方文檔（後端開發）；
JNI 開發指南（本地插件開發）。

通過以上示例，你可以快速搭建WPS插件的Java後端服務，並實現前端插件與Java的交互，擴展WPS的業務能力（如數據對接、報表生成、批量處理等）。

wx690f565d7bc78 博客

wx690f565d7bc78 博客

博客 / 詳情