vue+element+springboot前后端分离项目整合pageoffice实现在线编辑Word和Excel跟签章等

本文链接：https://blog.youkuaiyun.com/Amy_Victoria/article/details/123841772

本文档详细介绍了如何在Vue+ElementUI的前端项目和SpringBoot后端结合PageOffice，实现在线编辑Word和Excel以及签章功能。首先，前端在public目录下创建html文件，并在Vue组件中通过两种方法调用PageOffice。后端部分，配置Maven依赖，设置应用YML文件，并创建PageOfficeController。在实际部署中遇到跨域问题，通过添加CrossFilter类进行解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为公司业务的需求，需要在线编辑word等的功能。

这里只是为了讲解怎么整合，官网上还有很多更加复杂的功能可以根据自己的需求增加，应该都是大同小异

先展示下效果

先写一下重点，前端项目中只要实现下面两点就行了，功能页面都是放在后端的

（1）
<!-- 引用后端项目中的pageoffice.js文件跟jquery.min.js文件 -->
<!-- 后端的地址-->
<script type="text/javascript" src="http://localhost:8082/pageoffice.js"></script>
<script type="text/javascript" src="http://localhost:8082/jquery.min.js"></script>
（2）添加打开文档的js代码：
<!-- 后端的接口地址-->
 <a href="javascript:POBrowser.openWindowModeless('http://localhost:8082/pageoffice/word','width=1200px;height=800px;');">最简单的打开和保存</a>

前端部分

在前端项目的public文件夹下创建html文件，重点，一定要在public文件夹下创建html文件

test.html

<!DOCTYPE html>
<html>
    <head>
        <title>打开word文件</title>
        <script type="text/javascript" src="http://localhost:8082/pageoffice.js"></script>
        <script type="text/javascript" src="http://localhost:8082/jquery.min.js"></script>
    </head>
    <body>
        <a href="javascript:POBrowser.openWindowModeless('http://localhost:8082/pageoffice/word','width=1200px;height=800px;');" >最简单的打开和保存</a>
<!--http://localhost:8082/pageoffice/word  后端项目地址+接口地址-->
    </body>
</html>

因为vue里不能使用<script type="text/javascript" src="http://localhost:8082/pageoffice.js"></script>这种形式的引入后端的js文件，所以需要跳转到html页面去实现

vue页面（方法一）

<template>
  <div class="app-container">
    <a href="javascript:void(0)" @click="jumpOutsideLink(`${$publicURL}test.html`, '测试打开')">测试打开</a>
  </div>
</template>


<script>
import MyTable from '@/components/MyTable.vue';
import { getApiUrl, formateTimeStamp } from '@/utils/utils'
import { getToken } from '@/utils/auth'

exp