本文描述了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中央仓库 (opens new window)](https://mvnrepository.com/artifact/com.zhuozhengsoft/pageoffice)，建议使用最新版本。
	如果使用Springboot3，或Tomcat10及以上版本，使用下面的pom.xml配置

```
<dependency>
  <groupId>com.zhuozhengsoft</groupId>   
  <artifactId>pageoffice</artifactId>   
  <version>6.6.1.3</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.3-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.3.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及之前版本无需此代码）
// --------------------------------------------------------------

/**
 * 使用 SpringBoot 内嵌容器（Jar包部署）必须注册该 Bean；使用外部独立容器（War包部署）无需注册。
 * PageOffice WebSocket 的 ServerEndpointExporter
 */
@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: {
	   /*
	   * 设置代理，根据项目实际情况配置
	   */
	   "/dev-api": { // "/dev-api"对应后端项目"http://192.168.1.100:8081"地址 
	     target: "http://192.168.1.100:8081",
	     ws: true, //必须，启用websocket。
	     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) | PageOffice 开发者中心](https://pageoffice.cn/pages/d83620/)

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

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

编程语言

本文详解PageOffice在VUE+Springboot前后端分离项目中的集成方法，涵盖后端pom依赖配置、posyspath设置、Controller调用及前端代理、POBrowser.openWindow操作，实现Word在线编辑保存功能。

代码解释

服务器

容器

路由

JSON

热销域名限时优惠，新客首年免费！


domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

社区新版编辑器体验调研

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

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐