# pageoffice6-react-springboot-simple

**Repository Path**: pageoffice/pageoffice6-react-springboot-simple

## Basic Information

- **Project Name**: pageoffice6-react-springboot-simple
- **Description**: PageOffice6-React-SpringBoot-Simple 项目展示了如何在前端（React）和后端（SpringBoot）分离的项目中使用 PageOffice v6.0 产品。该项目演示了最简单的在网页上打开、编辑和保存Word文件的方法。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-03
- **Last Updated**: 2025-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PageOffice6-React-SpringBoot-Simple

**Latest Version：6.6.1.1**

### 1. 简介

PageOffice6-React-SpringBoot-Simple 项目展示了如何在前端（React）和后端（SpringBoot）分离的项目中使用 PageOffice v6.0 产品。该项目演示了最简单的在网页上打开、编辑和保存 Word 文件的方法。

### 2. 项目运行准备

   **React**: React 19 及以上版本

   **Springboot**:Springboot2.6, JDK1.8

### 3. 项目运行步骤

- 使用 “git clone” 或者直接下载项目的压缩包到本地电脑，然后解压。
  - **前端**
    - 使用 Visual Studio Code 等开发工具打开 `pageoffice6-react-simple-front` 文件夹。进入该文件夹后，使用 `npm run start` 命令启动并运行项目。
  - **后端**
    - 在当前服务器计算机上创建一个新的 PageOffice 系统文件夹，例如：D:/pageoffice。（该文件夹将用于存储 PageOffice 注册后生成的授权文件 “license.lic” 以及 PageOffice 客户端程序。）
    - 下载 PageOffice 客户端程序。
      https://www.zhuozhengsoft.com/dowm
    - 将上一步下载的 PageOffice 客户端程序复制到新创建的 pageoffice系统文件夹中。
    - 运行 `pageoffice6-springboot-simple-back` 以查看示例效果。


### 4. 序列号

- PageOfficeV6.0标准版试用序列号：A7VHK-HDTK-338U-NARCV

- PageOfficeV6.0专业版试用序列号：6VD6L-3MJL-DASM-YD9B5


### 5.如何将 PageOffice V6 集成到你的 Web 项目中

- 前端

  - 通过以下命令在你的项目中安装 `js-pageoffice`：**npm install js-pageoffice@6.6.1 --save-exact**

    > 注意：请确保安装的 js-pageoffice 库的版本号与后端项目的 pom.xml 文件中引用的 PageOffice JAR 包指定的版本号的前三位相匹配。

  - 在项目的全局拦截器中添加 PageOffice 相关配置。

    ```jsx
    // 引入 axios 库，用于发起 HTTP 请求
    import axios from "axios";
    // 引入 js-pageoffice 库中的 POBrowser 模块
    import { POBrowser } from "js-pageoffice";
    
    // 创建一个 axios 实例
    const service = axios.create({
      // 设置请求的基础 URL，这里使用 "/dev-api" 作为开发环境的 API 前缀
      baseURL: "/dev-api",
      // 设置请求超时时间为 5000 毫秒（即 5 秒）
      timeout: 5000,
    });
    
    // 添加请求拦截器
    service.interceptors.request.use(
      (config) => {
        // 假设你的令牌（token）存储在 cookie 中，那么使用这行代码。为了方便演示，这里我们使用常量 token = "123"。
        // const token = Cookies.get('token');
        const token = "123";
        if (token) {
          // 在请求头中添加 Authorization 字段，值为 "Bearer " 加上令牌
          config.headers["Authorization"] = "Bearer " + token; 
    
          // PageOffice 的设置代码开始 -------------------------------------------------
          // PageOffice 的全局配置必须在这个拦截器中定义。
          // 必需。设置后端代理。具体的属性值应根据你的实际开发情况确定。
          POBrowser.setProxyBaseAPI("/dev-api"); 
          // 必需。为请求 PageOffice 后端设置请求头。你可以多次调用 setHeader() 方法来设置更多的值。具体的属性名和值应根据你的实际开发情况确定。
          POBrowser.setHeader("Authorization", "Bearer " + token); 
          /**
            前端令牌存储解决方案
            方案 1：使用 Cookies
            如果你的令牌存储在 cookie 中，PageOffice 默认会支持通过 cookie 存储令牌。因此，你不需要编写任何额外的代码。
            方案 2：使用 LocalStorage 或 SessionStorage
            如果令牌存储在 LocalStorage 或 SessionStorage 中，你必须调用 POBrowser.setStorage() 方法。
           */
          // 你可以多次调用 setStorage() 方法来设置更多的值。具体的属性名和值应根据你的实际开发情况确定。
          //POBrowser.setStorage("Admin-Token",getToken()); 
          // PageOffice 的设置代码结束 -------------------------------------------------
        }
    
        return config;
      },
      (error) => {
        // 当请求发生错误时，返回一个被拒绝的 Promise，其错误信息为 error
        return Promise.reject(error);
      }
    );
    
    // 添加响应拦截器
    service.interceptors.response.use(
      (response) => {
        // 当响应成功时，返回响应的数据部分
        return response.data;
      },
      (error) => {
        // 当响应发生错误时，返回一个被拒绝的 Promise，其错误信息为 error
        return Promise.reject(error);
      }
    );
    
    // 导出创建的 axios 实例
    export default service;
    ```

  - 配置powserver通过websocket进行代理。在当前项目的setupProxy.js中添加如下配置：

    ```react
    module.exports = function (app) {
    //精确匹配 /dev-api/powserver 代理启用websocket
      const wsProxyFilter = function (pathname, req) {
        const match = pathname.match('^/dev-api/powserver');
        if (match) {
            // 可以在这里加个打印，看看是否触发了匹配
            // console.log('Proxy Filter matched:', pathname); 
        }
        return match;
      }
      app.use(
        createProxyMiddleware(wsProxyFilter, {
          target: "http://localhost:8082",
          changeOrigin: true,
          pathRewrite: { "^/dev-api/": "" },
          ws: true,
        })
      );
    
      //项目原有的（保持不变）
      app.use(
        "/dev-api",
        createProxyMiddleware({
          target: "http://localhost:8082",
          changeOrigin: true,
          pathRewrite: { "^/dev-api": "" },
        })
      );
    
    };
    ```
    
  - 通过点击超链接或按钮触发弹出用于编辑 Office 文档的 POBrowser 窗口。假设在 `App.js` 中点击一个链接弹出 POBrowser，包含 PageOffice 控件的页面是 `ShowDoc.js`。（例如，`App.js` 在 PageOffice 中被称为父页面）。当点击超链接时，调用 `POBrowser` 对象的 `openWindow` 方法弹出一个 PageOffice 浏览器 (`POBrowser`) 窗口以访问 `showDoc.js` 并在线打开文件。代码如下:
  
    ```jsx
    // 定义打开 Word 文件的函数
    const openWordFile = () => {
        try {
            // openWindow() 方法的第三个参数用于向弹出的 PageOffice 浏览器（POBrowser）窗口传递参数（参数长度无限制）。它支持 JSON 格式的字符串。
            // 为了方便演示，这里传递了两个参数：file_id 和 file_name。请根据实际开发情况进行调整。
            POBrowser.openWindow("/showDoc", "width=1150px;height=900px;", paramString);
        } catch (error) {
            console.error("请求出错:", error);
        }
    };
    
    ```
  
  
    - 配置 `showDoc.js` 的访问路由。
  
      ```react
        <Route path="/showDoc" element={<ShowDoc />} />
      ```
  
  
    -  然后编辑 `showDoc.js`。
  
      ```jsx
      /* eslint-disable no-undef */
      import React, {useState, useEffect, useRef} from 'react';
      import service from '../api';
      const ShowDoc = () => {
      const [poHtmlCode, setPoHtmlCode] = useState ('');
      const open_params = useRef ('');
      // PageOffice初始化事件的回调函数。你可以在这里添加自定义按钮。
      const OnPageOfficeCtrlInit = () => {
      pageofficectrl.AddCustomToolButton ("保存", "Save", 1);
      pageofficectrl.AddCustomToolButton ("另存为", "SaveAs", 5);
      pageofficectrl.AddCustomToolButton ("打印设置", "PrintSet", 0);
      pageofficectrl.AddCustomToolButton ("打印", "PrintFile", 6);
      pageofficectrl.AddCustomToolButton ("全屏", "IsFullScreen", 4);
      pageofficectrl.AddCustomToolButton ("关闭", "Close", 21);
      };
      const Save = () => {
      // 使用 SaveFilePage 属性来设置后端保存方法的控制器路由地址。此地址必须以 "/" 开头，你也可以向此路由地址传递 JSON 字符串参数。示例如下：
      let saveFileUrl = "/doc/saveFile";
      let paramValue = new URLSearchParams (open_params.current);// 为简单起见，这里我们直接使用打开过程中使用的参数。
      pageofficectrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
      // 在这里编写保存前的代码。
      pageofficectrl.WebSave ();
      // 在这里编写保存后的代码。例如，你可以使用 pageofficectrl.CustomSaveResult 检查保存结果。
      };
      const SaveAs = () => {
      pageofficectrl.ShowDialog(3);
      };
      const PrintSet = () => {
      pageofficectrl.ShowDialog(5);
      };
      const PrintFile = () => {
      pageofficectrl.ShowDialog(4);
      };
      const Close = () => {
      pageofficectrl.CloseWindow();
      };
      const IsFullScreen = () => {
      pageofficectrl.FullScreen = !pageofficectrl.FullScreen;
      };
      const AfterDocumentOpened = () => {
      // 在这里编写文档打开后将自动触发的代码。
      };
      const openFile = async () => {
      try {
      const response = await service.post ('/doc/openFile', open_params.current);
      return response;
      } catch (error) {
      console.error (' 获取文件时出错:', error);
      return null;
      }
      };
      useEffect(() => {
      open_params.current = JSON.parse(pageofficectrl.WindowParams);
      openFile().then((response) => {
      if (response) {
      setPoHtmlCode(response);
      }
      });
      window.POPageMounted = {OnPageOfficeCtrlInit, AfterDocumentOpened, Save, SaveAs, PrintSet, PrintFile, Close, IsFullScreen };
      return () => {
      delete window.POPageMounted;
      };
      }, []);
      
        return (
          <div className="showDoc">
           {/* 加载控件的Div,控件的高度和宽度由这个div的高度和宽度来决定*/}
            <div
              style={{position:'absolute', width: '100%', height: '100%' }}
              dangerouslySetInnerHTML={{ __html: poHtmlCode }}
            />
          </div>
        );
      };
      
      export default ShowDoc;
      ```
  


- 后端

  - 下载 PageOffice 客户端程序。
    [posetup_6.x.x.x.exe](https://gitee.com/pageoffice/pageoffice6-client/releases)
    
  - 将上一步下载的 PageOffice 客户端程序复制到新创建的 pageoffice系统文件夹中。

  - 在项目的 `pom.xml` 文件中使用以下代码引入PageOffice依赖。`PageOffice.jar` 已发布到 [Maven 中央仓库](https://mvnrepository.com/artifact/com.zhuozhengsoft/pageoffice)。建议使用最新版本。

      > 注意：建议从当前的 Maven 中央仓库使用最新版本的 PageOffice Jar。

      ```xml
      <dependency>
          <groupId>com.zhuozhengsoft</groupId>
          <artifactId>pageoffice</artifactId>
          <version>6.6.1.1-javax</version>
      </dependency>
      ```

      如果你使用的是 SpringBoot 3，请使用以下配置代码。

      ```xml
      <dependency>
          <groupId>com.zhuozhengsoft</groupId>
          <artifactId>pageoffice</artifactId>
          <version>6.6.1.1</version>
      </dependency>
      ```

  - 在您项目的启动类Application类中添加一项@Bean配置，此为PageOffice服务器端的必要配置，代码如下：

    ```java
    @Value("${posyspath}")
    private String poSysPath;
    
    @Bean
    public ServletRegistrationBean pageofficeRegistrationBean()  {
    com.zhuozhengsoft.pageoffice.poserver.Server poserver 
                            = new com.zhuozhengsoft.pageoffice.poserver.Server();
    poserver.setSysPath(poSysPath);//设置PageOffice注册成功后,license.lic文件存放的目录
    
    ServletRegistrationBean srb = new ServletRegistrationBean(poserver);
    srb.addUrlMappings("/poserver.zz");
    srb.addUrlMappings("/poclient");
    srb.addUrlMappings("/sealsetup.exe");
    return srb;
    }
    
    /**
     * Pageoffice配置启用websocket，Pageoffice v6.6.1.1及以上版本必须配置
     *
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        ServerEndpointExporter exporter = new ServerEndpointExporter();
        exporter.setAnnotatedEndpointClasses(
                com.zhuozhengsoft.pageoffice.poserver.WServer.class
        );
        return exporter;
    }
    
    
    /**
     * PageOffice配置powserver跨域，Pageoffice v6.6.1.1及以上版本必须配置
     *
     * @return
     */
    @Bean
    public ServletListenerRegistrationBean powContextListener() {
        return new ServletListenerRegistrationBean<>(new POWContextListener());
    }
    
    @Bean
    public ServletContextInitializer pageofficeContextParams() {
        /*
         * powserver跨域安全配置：
         * 1. 生产环境不推荐使用"*"，建议明确指定允许的域名/IP
         * 2. 格式：多个地址用逗号分隔，如"域名1,域名2,IP"。注意：本地开发环境地址(localhost,127.0.0.1)也必须在此配置。
         * 3. 示例：
         *    - 前后端分离："前端域名地址,前端ip地址,后端地址"
         *      (如"ui.example.com,192.168.1.1,localhost")
         *    - 单体多入口："域名,ip"
         *      (如"www.oa.com,192.168.1.100")
         */
        return servletContext ->
                servletContext.setInitParameter("powserver-allowedOrigins", "*");
    }
    ```

    > [!NOTE]
    >
    > 在实际开发中，您的后端项目中必须将PageOffice相关配置请求从后端拦截器SpringSecurity或者Shiro等授权认证校验框架中放出来。例如：
    >
    > - SpringSecurity
    >
    > ```java
    > .antMatchers("/poserver.zz","/poclient","/sealsetup.exe").permitAll()
    > ```
    >
    > - Shiro
    >
    > ```java
    > filterChainDefinitionMap.put("/poserver.zz", "anon");
    > filterChainDefinitionMap.put("/poclient", "anon");
    > filterChainDefinitionMap.put("/sealsetup.exe", "anon");
    > ```

  - 然后在 “controllers/DocumentController.java” 中编写以下服务器代码。

    ```java
    @RequestMapping(value = "/openFile", method = org.springframework.web.bind.annotation.RequestMethod.POST)
    public String openFile(HttpServletRequest request, @RequestBody Map<String, Object> params) {
        PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
        String file_name = (String) params.get("file_name");
        poCtrl.webOpen("file://" + dir + file_name, OpenModeType.docNormalEdit, "Luna");
        return poCtrl.getHtml();
    }
    ```

  - 最后，如果用户想要保存文档，在 “controllers/DocumentController.java” 中添加一个名为 Save 的新方法。

    ```java
    @RequestMapping(value = "/saveFile",method = org.springframework.web.bind.annotation.RequestMethod.POST)
    public void saveFile(HttpServletRequest request, HttpServletResponse response,@RequestParam String file_name) {
        FileSaver fs = new FileSaver(request, response);
        fs.saveToFile(dir + file_name);
        fs.close();
    }
    ```

- 分别运行前端项目和后端项目。然后在浏览器的地址栏中访问前端 React 项目。按照提示安装PageOffice V6客户端。一旦出现注册对话框，输入 PageOfficeV6版本的试用序列号以完成注册。