Vue+SpringBoot 集成 PageOffice实现在线编辑 Word、Excel 文档

Vue+SpringBoot 集成 PageOffice 实现在线编辑 Word、Excel 文档

说明

PageOffice 是一款在线 Office 编辑软件，帮助 Web 应用系统或 Web 网站实现用户在线编辑 Word、Excel、PowerPoint 文档。可以完美实现在线公文流转、领导批阅、盖章，可以给文件添加水印，在线安全预览防止用户下载和复制文件等。

一、环境要求

前端 Vue 项目

Node.js 10 及以上版本
注意：当前集成方式不支持 Vue 3（Vue 3 不兼容 IE）

Vue 3 集成 PageOffice 请参考：Vue3 + Spring Boot 集成 PageOffice 在线编辑 Office 文件

后端 Spring Boot 项目

IntelliJ IDEA
JDK 1.8 及以上版本

二、前端项目配置

1. 在 index.html 中引入 PageOffice

在 public/index.html 文件中添加以下脚本引用：

html 复制代码

<script type="text/javascript" src="http://localhost:8081/samples-springboot-back/pageoffice.js"></script>

2. 配置 vue.config.js 代理

在项目根目录下的 vue.config.js 文件中配置代理：

javascript 复制代码

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081/samples-springboot-back', // 后端项目地址
        ws: true,
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 使用 '/api' 代替真实的接口地址
        }
      }
    }
  }
}

3. 创建入口页面（index.vue）

在需要打开文档的页面添加按钮，通过点击事件调用 POBrowser：

vue 复制代码

<template>
  <div>
    <el-button type="primary" @click="openWord">打开Word文档</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    openWord() {
      // 第一个参数 "SimpleWord/Word" 是 Vue 路由路径
      POBrowser.openWindowModeless('SimpleWord/Word', 'width=1150px;height=900px;')
    }
  }
}
</script>

4. 创建 Word.vue 页面

在 views/SimpleWord/Word.vue 中创建页面组件：

vue 复制代码

<template>
  <div class="Word">
    <div style="height: 800px; width: auto" v-html="poHtmlCode" />
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Word",
  data() {
    return {
      poHtmlCode: ""
    };
  },
  created() {
    axios
      .post("/api/SimpleWord/Word")
      .then(response => {
        this.poHtmlCode = response.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    // PageOffice 控件中的方法，通过 poCtrl.addCustomToolButton 定义
    Save() {
      document.getElementById("PageOfficeCtrl1").WebSave();
    }
  },
  mounted() {
    // 将 PageOffice 控件中的方法挂载到 window 对象上
    window.Save = this.Save;
  }
};
</script>

5. 配置路由

在路由配置文件（如 router/index.js）中添加路由：

javascript 复制代码

{
  path: '/SimpleWord/Word',
  name: 'Word',
  component: () => import('@/views/SimpleWord/Word.vue')
}

注意：如果需要在请求中添加 Token，可以在 main.js 中配置 Axios 拦截器。

三、后端项目配置

1. 添加 PageOffice 依赖

在 pom.xml 中添加：

xml 复制代码

<dependency>
    <groupId>com.zhuozhengsoft</groupId>
    <artifactId>pageoffice</artifactId>
    <version>5.4.0.3</version>
</dependency>

2. 配置 application.properties

properties 复制代码

# PageOffice 注册文件存放路径
po.sys.path=D:/pageoffice/license/

3. 配置 Servlet Bean（启动类）

在 Spring Boot 启动类中添加 ServletRegistrationBean 配置：

java 复制代码

@SpringBootApplication
public class SamplesSpringbootBackApplication {

    @Value("${po.sys.path}")
    private String poSysPath;

    public static void main(String[] args) {
        SpringApplication.run(SamplesSpringbootBackApplication.class, args);
    }

    @Bean
    public ServletRegistrationBean pageofficeRegistrationBean() {
        com.zhuozhengsoft.pageoffice.poserver.Server poserver = 
            new com.zhuozhengsoft.pageoffice.poserver.Server();
        // 设置 PageOffice 注册成功后 license.lic 文件存放的目录
        poserver.setSysPath(poSysPath);
        
        ServletRegistrationBean srb = new ServletRegistrationBean(poserver);
        srb.addUrlMappings("/poserver.zz");
        srb.addUrlMappings("/posetup.exe");
        srb.addUrlMappings("/pageoffice.js");
        srb.addUrlMappings("/jquery.min.js");
        srb.addUrlMappings("/pobstyle.css");
        srb.addUrlMappings("/sealsetup.exe");
        return srb;
    }
}

注意：/poserver.zz 等请求不要被拦截，需要放行 GET 和 POST 请求。

4. 创建 Controller（打开文档）

java 复制代码

@RestController
@RequestMapping("/SimpleWord")
public class SimpleWordController {

    @RequestMapping("/Word")
    public String showWord(HttpServletRequest request) {
        PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
        // 设置服务页面（注意：/api 是前端代理配置）
        poCtrl.setServerPage("/api/poserver.zz");
        
        // 添加自定义按钮
        poCtrl.addCustomToolButton("保存", "Save", 1);
        
        // 设置保存接口
        poCtrl.setSaveFilePage("/api/SimpleWord/save");
        
        // 打开 Word 文档（磁盘路径必须使用双反斜杠）
        poCtrl.webOpen("D:\\doc\\test.docx", 
                      OpenModeType.docNormalEdit, 
                      "张三");
        
        return poCtrl.getHtmlCode("PageOfficeCtrl1");
    }

    @RequestMapping("/save")
    public void save(HttpServletRequest request, HttpServletResponse response) {
        FileSaver fs = new FileSaver(request, response);
        fs.saveToFile("D:\\doc\\" + fs.getFileName());
        fs.close();
    }
}

关键点说明：

setServerPage 和 setSaveFilePage 中的 /api 前缀对应前端配置的代理

webOpen 的第一个参数是文件在服务器上的绝对路径

保存文件时可以自定义保存逻辑，这里简单保存到原目录

5. 配置跨域（可选）

如果遇到跨域问题，可以添加 CORS 配置：

java 复制代码

@Configuration
public class CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:8080") // Vue 项目地址
                        .allowedMethods("*")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}

Vue+SpringBoot 集成 PageOffice实现在线编辑 Word、Excel 文档