本文描述了PageOffice产品在（VUE3+Springboot）前后端分离的项目中如何集成调用。
> 假设开发环境电脑IP为：
> **192.168.1.100**
## 后端Springboot项目
1. 新建Springboot后端项目：springboot-back，在配置文件application.properties中设置项目端口为：8081
```java
server.port=8081
```
2. 在您项目的pom.xml中通过下面的代码引入PageOffice依赖。pageoffice.jar已发布到[Maven中央仓库 (opens new window)](https://mvnrepository.com/artifact/com.zhuozhengsoft/pageoffice)，建议使用最新版本。
	如果使用Springboot3，或Tomcat10及以上版本，使用下面的pom.xml配置
```java
<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>
```
	如果使用Springboot2，或Tomcat9及以下的版本，使用下面的pom.xml配置
```java
<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/
5.  打开springboot-back项目的配置文件application.properties，添加一个posyspath变量，值为上一步创建的pageoffice文件夹的路径
```java
server.port=8081
posyspath=D:/pageoffice
```
6. 在您项目的启动类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 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
>```java
.antMatchers("/poserver.zz","/poclient","/sealsetup.exe","/powserver").permitAll()
```
>- Shiro
```java
filterChainDefinitionMap.put("/poserver.zz", "anon");
filterChainDefinitionMap.put("/poclient", "anon");
filterChainDefinitionMap.put("/sealsetup.exe", "anon");
filterChainDefinitionMap.put("/powserver", "anon"); 
```
7. 新建Controller并调用PageOffice在线打开文件，例如DocumentController代码如下：
```java
@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();
	}
}
```
## 前端vue3项目
1. 新建Vue3前端项目：vue-front
2. Vue配置代理。
```js
 proxy: {
   /*
   * 新增：powserver代理配置（建议直接拷贝此段配置并根据说明修改对应位置）
   * powserver服务代理配置（关键说明）：
   * 1. 此规则必须放在原有的"/dev-api"规则之前，确保优先匹配
   * 2. 相比原有配置，仅增加了WebSocket支持（ws和configure参数）
   */
   "/dev-api/powserver": {
     // 注意：target必须与下方原有的配置相同
     target: "http://192.168.1.100:8081",
     changeOrigin: true,
     // 注意：rewrite函数必须与下方原有的配置相同
     rewrite: (path) => path.replace(/^\/dev-api/, ""),
     ws: true,  
     configure: (proxy) => { 
       proxy.on("proxyReqWs", (proxyReq, req) => {
         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",
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/dev-api/, ""),
   },
 },
```
3. 引用js-pageoffice库。使用命令安装：**npm install js-pageoffice@6.6.1 --save-exact**
> 注意：请确保安装的js-pageoffice库版本号与后端项目pom.xml文件中引用的PageOffice JAR包版本号的前三位相同。
4. 在全局拦截器中添加PageOffice相关配置。
```js
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，用来显示在线打开的文档。
```js
 <script setup>
 import request from '@/utils/request';
 import { ref, onMounted } from 'vue'

 const poHtmlCode = ref('');
 const open_params = ref('');

 function OnPageOfficeCtrlInit() {
   // PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
   pageofficectrl.AddCustomToolButton("保存", "Save", 1);//其中"Save"对应function Save()函数，并且需要在onMounted中挂载。
 };

 function Save() {
   //使用SaveFilePage属性设置后端保存方法的Controller路由地址，这个地址必须从"/"开始，并且也可以向此路由地址传递json字符串参数，示例如下：
   let saveFileUrl = "/doc/saveFile";
   let paramValue = new URLSearchParams(open_params.value);//为了简单起见，这里直接使用打开时的参数。
   pageofficectrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
   //在这里写您保存前的代码
   pageofficectrl.WebSave();
   //在这里写您保存后的代码，比如判断保存结果pageofficectrl.CustomSaveResult
   //alert(pageofficectrl.CustomSaveResult);
 };

 function AfterDocumentOpened() {
   //在这里写您文档打开后自动触发的代码
 };

 function openFile() {
   // 发起GET请求到后端Controller的/doc/openFile路由
   return request({
     url: '/doc/openFile',
     method: 'get',
     params: open_params.value
   });
 };

 onMounted(() => {
   //使用pageofficectrl.WindowParams获取获取父页面(此项目中为：HomeView.vue)中POBrowser.openWindow()方法的第三个参数的值,获取到的值为string类型
   open_params.value = JSON.parse(pageofficectrl.WindowParams);
   // 请求后端打开文件
   openFile().then(response => {
     poHtmlCode.value = response;
   });
   //将需要回调的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
   window.POPageMounted = { OnPageOfficeCtrlInit, AfterDocumentOpened, Save };//其中OnPageOfficeCtrlInit必须

 });
 </script>
 <template>
   <div class="doc">
     演示: 文档<br /><br />
     
     <div style="width:auto; height:900px;" v-html="poHtmlCode"></div>
   </div>
 </template>
```
6. 配置DocView.vue的访问路由
```js
const routes = [
  // 其他路由配置项...
  // 下面添加DocView.vue的路由
  ,
  {
    path: '/showDoc',
    name: 'doc',
    component: () => import('../views/DocView.vue')
  }
]
```
7. 在您的Vue页面（比如HomeView.vue，PageOffice中把这个页面称之为父页面）添加一个打开文件的超链接，点击超链接调用POBrowser对象的openWindow方法，弹出PageOffice浏览器（POBrowser）窗口访问DocView.vue在线打开文件，代码如下：
```html
 <a href="#" @click.prevent="open_pageoffice()">打开文件</a>
```
```js
 <script setup>
 import request from '@/utils/request';
 import { POBrowser } from "js-pageoffice";
 import { ref, onMounted } from 'vue';

 const titleText = ref('');
 const paramJson = {};
 paramJson.file_id = 1;
 paramJson.file_name = "test.doc";
 const paramString = JSON.stringify(paramJson);

 function open_pageoffice() {
   //openWindow()第三个参数用来向弹出的PageOffice浏览器（POBrowser）窗口传递参数(参数长度不限)，支持json格式字符串。
   //此处为了方便演示，我们传递了file_id和file_name两个参数，具体以您实际开发为准。
   POBrowser.openWindow('/showDoc', 'width=1150px;height=900px;', paramString);

 }
 </script>
```
8. 启动springboot-back和vue-front项目，点击“打开文件”超链接，查看在线打开编辑保存Word文件的效果。

原文链接https://www.pageoffice.cn/pages/1c2c6e/

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

前后端分离VUE3+Springboot项目集成PageOffice核心代码

ageOffice充分利用了用户电脑上已有的办公软件资源，无需重复购买或订阅在线办公服务，即可实现与桌面应用同等的编辑功能，包括复杂的文字表格排版、VBA宏支持、模板套红、在线比较差异等，这些都是云文档产品难以企及的。

编程语言

前端

架构设计

PageOffice在VUE3+Springboot项目中集成指南：包含前后端配置、依赖引入、跨域处理、安全放行等关键步骤，实现Word文档在线编辑保存功能。详细说明代理配置、版本匹配、文件路径设置等核心要点。

服务器

路由

JSON

domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

社区新版编辑器体验调研

前后端分离VUE3+Springboot项目集成PageOffice核心代码-腾讯云开发者社区-腾讯云

前后端分离VUE3+Springboot项目集成PageOffice核心代码

前后端分离VUE3+Springboot项目集成PageOffice核心代码

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐