本文描述了PageOffice产品在（VUE+Springboot）前后端分离的项目中如何集成调用。
> 假设开发环境电脑IP为：**192.168.1.100**

# 后端Springboot项目

1. 新建Springboot后端项目：springboot-back，在配置文件application.properties中设置项目端口为：8081
	```
	server.port=8081
	```
2. 在您项目的pom.xml中通过下面的代码引入PageOffice依赖。pageoffice.jar已发布到[Maven中央仓库](https://mvnrepository.com/artifact/com.zhuozhengsoft/pageoffice)，建议使用最新版本。

如果使用Springboot3，或Tomcat10及以上版本，使用下面的pom.xml配置

```
<dependency>
  <groupId>com.zhuozhengsoft</groupId>   
  <artifactId>pageoffice</artifactId>   
  <version>6.6.1.1</version>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
如果使用Tomcat9及以下的版本，使用下面的pom.xml配置
```
<dependency>
  <groupId>com.zhuozhengsoft</groupId>   
  <artifactId>pageoffice</artifactId>   
  <version>6.6.1.1-javax</version>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
3. 新建一个pageoffice文件夹，用来存放PageOffice的系统文件（如license.lic、客户端安装包等），比如windows环境下创建：D:/pageoffice，linux环境下创建:/root/pageoffice
4. 拷贝pageoffice客户端安装程序到上一步创建的pageoffice文件夹下。
	- 客户端是windows环境：拷贝posetup_6.6.1.1.exe到pageoffice文件夹下；
	- 客户端是国产操作系统环境：拷贝对应芯片的PageOffice客户端deb安装包到pageoffice文件夹下；

>PageOffice客户端安装程序下载地址：[https://www.zhuozhengsoft.com/dowm/(opens new window)](https://www.zhuozhengsoft.com/dowm/)

5. 打开springboot-back项目的配置文件application.properties，添加一个posyspath变量，值为上一步创建的pageoffice文件夹的路径

```
server.port=8081
posyspath=D:/pageoffice
```
6. 在您项目的启动类Application类中添加一项@Bean配置，此为PageOffice服务器端的必要配置，代码如下：

```
@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 V6.6及以上版本新增以下代码，V6.5及之前版本无需此代码
@Bean
public ServerEndpointExporter serverEndpointExporter() {
    ServerEndpointExporter exporter = new ServerEndpointExporter();
    exporter.setAnnotatedEndpointClasses(
            com.zhuozhengsoft.pageoffice.poserver.WServer.class
    );
    return exporter;
}
@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", "*");
}
```
>注意
注意：在实际开发中，您的后端项目中必须将PageOffice相关配置请求从后端拦截器SpringSecurity或者Shiro等授权认证校验框架中放出来。例如：
>- SpringSecurity
```
.antMatchers("/poserver.zz","/poclient","/sealsetup.exe","/powserver").permitAll()
```
>- Shiro
```
filterChainDefinitionMap.put("/poserver.zz", "anon");
filterChainDefinitionMap.put("/poclient", "anon");
filterChainDefinitionMap.put("/sealsetup.exe", "anon");
filterChainDefinitionMap.put("/powserver", "anon"); 
```
7. 新建Controller并调用PageOffice在线打开文件，例如DocumentController代码如下：

```
@RestController
@RequestMapping(value = "/doc")
public class DocumentController {
	//获取doc目录的磁盘路径
	private String dir = GetDirPathUtil.getDirPath() + "static/";

	@RequestMapping(value="/openFile")
	public String openFile(HttpServletRequest request,int file_id,String file_name)  {
		//file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
		PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
		//webOpen的第一个参数支持能够输出下载文件的Url相对地址或者文件在服务器上的磁盘路径两种方式
		//查看详细，请在"https://www.pageoffice.cn/"搜索“PageOffice属性或方法中涉及到的URL路径或磁盘路径的说明”
		poCtrl.webOpen("file://"+dir+file_name, OpenModeType.docNormalEdit, "张三");
		return poCtrl.getHtml();//必须
	}

	@RequestMapping("/saveFile")
	public void saveFile(HttpServletRequest request, HttpServletResponse response,int file_id,String file_name)  {
		//file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
		FileSaver fs = new FileSaver(request, response);
		fs.saveToFile(dir + file_name);
		fs.close();
	}
}
```
# 前端vue项目

1. 新建Vue前端项目：vue-front
2. Vue配置代理。
	```
	 proxy: {
	   /*
	   * 新增：powserver代理配置（建议直接拷贝此段配置并根据说明修改对应位置）
	   * powserver服务代理配置（关键说明）：
	   * 1. 此规则必须放在原有的"/dev-api"规则之前，确保优先匹配
	   * 2. 相比原有配置，仅增加了WebSocket支持（ws和onProxyReqWs参数）
	   */
	   "/dev-api/powserver": {
	     // 注意：target必须与下方原有的配置相同
	     target: "http://192.168.1.100:8081",
	     changeOrigin: true,
	     // 注意：rewrite函数必须与下方原有的配置相同
	     pathRewrite: {
	       "^/dev-api": "",
	     },
	     ws: true,
	     onProxyReqWs: (proxyReq, req, socket, options, head) => {
	       const host = req.headers.host;
	       if (host) {
	         proxyReq.setHeader("X-Forwarded-Host", host);
	       }
	     },
	   },
	   
	   /*
	   * 项目原有的通用代理配置（保持原样不动）
	   *
	   */
	   "/dev-api": { // "/dev-api"对应后端项目"http://192.168.1.100:8081"地址 
	     target: "http://192.168.1.100:8081",
	     ws: true,
	     changeOrigin: true, 
	     pathRewrite: {
	       "^/dev-api": "",
	     },
	   },
	 },
	```
3. 引用js-pageoffice库。使用命令安装：**npm install js-pageoffice@6.6.1 --save-exact**
	>注意：请确保安装的js-pageoffice库版本号与后端项目pom.xml文件中引用的PageOffice JAR包版本号的前三位相同。
4. 在全局拦截器中添加PageOffice相关配置。
	```
	import axios from "axios";
	import { POBrowser } from "js-pageoffice";
	// 创建 axios 实例
	const service = axios.create({
	 baseURL: "/dev-api", // 设置你的基础 URL
	 timeout: 5000, // 设置请求超时时间
	});
	// 请求拦截器
	service.interceptors.request.use(
	  (config) => {
	    // 在发送请求之前做些什么
	    //const token = Cookies.get('token'); // 假设你的token存储在cookie中
	    const token = "123";
	    if (token) {
	      config.headers["Authorization"] = "Bearer " + token; // 将token添加到请求头中
	      // PageOffice全局配置，必须在此拦截器中定义
	      //必须。设置后端代理,具体属性值以您实际开发为准,比如POBrowser.setProxyBaseAPI(process.env.VUE_APP_BASE_API);
	      POBrowser.setProxyBaseAPI("/dev-api");
	      //必须。向PageOffice后端请求设置header，支持多次调用setHeader()设置更多的值，具体属性名称和属性值以您实际开发为准。
	      POBrowser.setHeader("Authorization", "Bearer " + token); 
	      /**
	       * 前端存储token的方案
	       *方案1.使用Cookie
	       *如果您的令牌(token)存储在Cookie中，PageOffice会默认支持通过Cookie方式保存令牌，因此您无需编写任何额外的代码。
	       *方案2.使用Localstorage或者SessionStorage
	       *如果令牌(token)是保存在LocalStorage或SessionStorage中，您必须调用POBrowser.setStorage()方法。
	       */
	      //POBrowser.setStorage("Admin-Token",getToken());//支持多次调用setStorage()设置更多的值，具体属性名称和属性值以您实际开发为准。
	    }
	    return config;
	  },
	  (error) => {
	    // 对请求错误做些什么
	    return Promise.reject(error);
	  }
	);
	```
5. 新建一个Vue页面：src/views/DocView.vue，用来显示在线打开的文档。
	```
	 <template>
	   <div class="doc">
	     演示: 文档<br /><br />
	     
	     <div style="width:auto; height:900px;" v-html="poHtmlCode"></div>
	   </div>
	 </template>
	 <script>
	 import request from '@/utils/request'
	 export default {
	   name: 'DocView',
	   data() {
	     return {
	       poHtmlCode: '',
	       open_params: '',
	     }
	   },
	   created: function () {
	     //使用pageofficectrl.WindowParams获取获取父页面(此项目中为：HomeView.vue)中POBrowser.openWindow()方法的第三个参数的值,获取到的值为string类型
	     this.open_params = JSON.parse(pageofficectrl.WindowParams);
	     // 请求后端打开文件
	     this.openFile().then(response => {
	       this.poHtmlCode = response;
	     }
	     );
	   },
	   methods: {
	     OnPageOfficeCtrlInit() {
	       //PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
	       pageofficectrl.AddCustomToolButton("保存", "Save", 1);//其中"Save"对应methods中的Save()函数，并且需要在mounted中挂载。
	     },
	     Save() {
	       //使用SaveFilePage属性设置后端保存方法的Controller路由地址，这个地址必须从"/"开始，并且也可以向此路由地址传递json字符串参数，示例如下：
	       let saveFileUrl = "/doc/saveFile";
	       let paramValue = new URLSearchParams(this.open_params);//为了简单起见，这里直接使用打开时的参数。
	       pageofficectrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
	       //在这里写您保存前的代码
	       pageofficectrl.WebSave();
	       //在这里写您保存后的代码，比如判断保存结果pageofficectrl.CustomSaveResult
	       //alert(pageofficectrl.CustomSaveResult);
	     },
	     AfterDocumentOpened() {
	       //在这里写您文档打开后自动触发的代码
	     },
	     openFile() {
	       //发起GET请求到后端Controller的/doc/openFile路由
	       return request({
	         url: '/doc/openFile',
	         method: 'get',
	         params: this.open_params
	       })
	     }
	   },
	   mounted: function () {
	     //将当前页面methods中定义的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
	     window.POPageMounted = this;//此行必须
	   }
	 }
	 </script>
	```
6. 配置DocView.vue的访问路由。
	```
	const routes = [
	  // 其他路由配置项...
	  // 下面添加DocView.vue的路由
	  ,
	  {
	    path: '/showDoc',
	    name: 'doc',
	    component: () => import('../views/DocView.vue')
	  }
	]
	```
7. 在您的Vue页面（比如HomeView.vue，PageOffice中把这个页面称之为父页面）添加一个打开文件的超链接，点击超链接调用POBrowser对象的openWindow方法，弹出PageOffice浏览器（POBrowser）窗口访问DocView.vue在线打开文件，代码如下：
	```
	 <a  href="#" @click.prevent="open_pageoffice()">打开文件</a>
	```
	```
	 <script>
	 import request from '@/utils/request'
	 import { POBrowser } from 'js-pageoffice'
	 export default {
	   name: 'HomeView',
	   methods: {
	     open_pageoffice() {
	       let paramJson={};
	       paramJson.file_id=1;
	       paramJson.file_name="test.doc";
	       let paramString=JSON.stringify(paramJson);
	       //openWindow()第三个参数用来向弹出的PageOffice浏览器（POBrowser）窗口传递参数(参数长度不限)，支持json格式字符串。
	       //此处为了方便演示，我们传递了file_id和file_name两个参数，具体以您实际开发为准。
	       POBrowser.openWindow('/showDoc', 'width=1150px;height=900px;',paramString);
	     },
	   }
	 }
	 </script>
	```
8. 启动springboot-back和vue-front项目，点击“打开文件”超链接，查看在线打开编辑保存Word文件的效果。

参考链接：[PageOffice最简集成代码(VUE+Springboot)](https://pageoffice.cn/pages/d83620/)

本文描述了PageOffice产品在（VUE+Springboot）前后端分离的项目中如何集成调用。

PageOffice最简集成代码(VUE+Springboot)

PageOffice不是普通的办公软件，而是一款专为政府、企事业单位内部管理系统设计的在线文档编辑控件。主要功能是管理软件系统能够在浏览器中直接打开编辑真正Word文档，无需离开系统或依赖外部云服务

编程语言

前端

本文详细讲解如何在VUE+Springboot前后端分离项目中集成PageOffice，包括后端配置、前端代理设置、跨域处理、安全认证放行等关键步骤，提供完整的代码示例和版本兼容性说明，帮助开发者快速实现文档在线编辑功能。

服务器

路由

JSON

2026新春采购季

domain

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

PageOffice最简集成代码(VUE+Springboot)-腾讯云开发者社区-腾讯云

PageOffice最简集成代码(VUE+Springboot)

PageOffice最简集成代码(VUE+Springboot)

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐