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

Amy_Victoria

已于 2022-05-17 19:12:46 修改

阅读量8.7k

点赞数 3

分类专栏： java springboot 文章标签： springboot java vue

于 2022-03-30 11:46:58 首次发布

本文链接：https://blog.csdn.net/Amy_Victoria/article/details/123841772

版权

springboot 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

java

2 篇文章 1 订阅

订阅专栏

因为公司业务的需求，需要在线编辑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'

export default {

  created() {
    //意思是template中的jumpOutsideLink 方法就是methods里的jumpOutsideLink
    window.jumpOutsideLink = this.jumpOutsideLink;
  },
  methods: {
    //mixin中方法
    //使用window.open进行跳转
    /**
     * 跳转外部链接文件
     * 仅前端内部文件
     * @param { 路径 } url
     * @param { 文件名 } fileName
     */
    jumpOutsideLink(url, fileName) {
      window.open(url, fileName);
    },
  },


}  
</script>

要在main.js文件中加入

//为了打开html页面
Vue.prototype.$publicURL = './';

效果

vue页面（方法二）

<template>
  <div class="app-container">
    <div>
      <iframe :src="reportUrl" frameborder="0" style="width:30%;height:20%;"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // iframe路径
      reportUrl: "./test.html"
    }
  }
}  
</script>

效果

前端部分结束了

后端部分

首先加入maven

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

        <!-- 添加Sqlite依赖（可选：如果不需要使用印章功能的话，不需要添加此依赖 ） -->
        <dependency>
            <groupId>org.xerial</groupId>
            <artifactId>sqlite-jdbc</artifactId>
            <version>3.32.3.2</version>
        </dependency>
        <!--添加PageOffice依赖（必须）。pageoffice5.3.0.1.jar在中央仓库。直接添加即可 -->
        <dependency>
            <groupId>com.zhuozhengsoft</groupId>
            <artifactId>pageoffice</artifactId>
            <version>5.3.0.1</version>
        </dependency>

在application.yml中配置

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    cache: false

# 用于存放注册的信息以及.db文件，这个db文件包含了签章的一些信息，pageoffice帮我们集成好了 我们不用管，只需要自己创建签章即可
posyspath: D:/lic/
# 默认密码，管理签章的默认账号  admin  111111
popassword: 111111

创建PageofficeController


import org.springframework.boot.web.servlet.ServletRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zhuozhengsoft.pageoffice.*;

import java.util.Map;

@RestController
@RequestMapping("/pageoffice")
public class PageofficeController {


    @Value("${docpath}")
    private String docPath;

    @Value("${posyspath}")
    private String poSysPath;

    @Value("${popassword}")
    private String poPassWord;


    /**
     * 添加PageOffice的服务器端授权程序Servlet（必须）
     * @return
     */
    @Bean
    public ServletRegistrationBean servletRegistrationBean() {
        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("/posetup.exe");
        srb.addUrlMappings("/pageoffice.js");
        srb.addUrlMappings("/jquery.min.js");
        srb.addUrlMappings("/pobstyle.css");
        srb.addUrlMappings("/sealsetup.exe");
        return srb;//
    }

    /**
     * 添加印章管理程序Servlet（可选）
     * @return
     */
    @Bean
    public ServletRegistrationBean servletRegistrationBean2() {
        com.zhuozhengsoft.pageoffice.poserver.AdminSeal adminSeal = new com.zhuozhengsoft.pageoffice.poserver.AdminSeal();
        adminSeal.setAdminPassword(poPassWord);//设置印章管理员admin的登录密码
        adminSeal.setSysPath(poSysPath);//设置印章数据库文件poseal.db存放的目录
        ServletRegistrationBean srb = new ServletRegistrationBean(adminSeal);
        srb.addUrlMappings("/adminseal.zz");
        srb.addUrlMappings("/sealimage.zz");
        srb.addUrlMappings("/loginseal.zz");
        return srb;//
    }



    @RequestMapping(value="/index", method=RequestMethod.GET)
    public ModelAndView showIndex(){
        ModelAndView mv = new ModelAndView("index");
        return mv;
    }

    //打开word文件
    @RequestMapping(value="/word", method= RequestMethod.GET)
    public ModelAndView showWord(HttpServletRequest request, Map<String,Object> map){
        PageOfficeCtrl poCtrl=new PageOfficeCtrl(request);
        //这个是从后端获取的 
        poCtrl.setServerPage("/poserver.zz");//设置服务页面
        poCtrl.addCustomToolButton("保存","Save",1);//添加自定义保存按钮
        poCtrl.addCustomToolButton("盖章","AddSeal",2);//添加自定义盖章按钮
        poCtrl.addCustomToolButton("关闭并刷新父页面","ClosePage",21);//添加关闭按钮
        //后端的保存文件请求方法路径
        poCtrl.setSaveFilePage("/pageoffice/save");//设置处理文件保存的请求方法
        //打开文件  docPath是拼接文件路径
        poCtrl.webOpen("file://"+docPath+"test.doc", OpenModeType.docAdmin,"张三");
        map.put("pageoffice",poCtrl.getHtmlCode("PageOfficeCtrl1"));
        ModelAndView mv = new ModelAndView("Word");
        return mv;
    }

    //打开excel文件
    @RequestMapping(value="/excel", method=RequestMethod.GET)
    public ModelAndView showExcel(HttpServletRequest request, Map<String,Object> map){

        PageOfficeCtrl poCtrl=new PageOfficeCtrl(request);
        //这个是从后端获取的 
        poCtrl.setServerPage("/poserver.zz");//设置服务页面
        poCtrl.addCustomToolButton("保存","Save",1);//添加自定义保存按钮
        poCtrl.addCustomToolButton("盖章","AddSeal",2);//添加自定义盖章按钮
        //后端的保存文件请求方法路径
        poCtrl.setSaveFilePage("/pageoffice/save");//设置处理文件保存的请求方法
        //打开文件 docPath是拼接文件路径
        poCtrl.webOpen("file://"+docPath+"test.xls",OpenModeType.xlsNormalEdit,"张三");
        map.put("pageoffice",poCtrl.getHtmlCode("PageOfficeCtrl1"));
        ModelAndView mv = new ModelAndView("Excel");
        return mv;
    }

    //保存前端操作的文件
    @RequestMapping("/save")
    public void saveFile(HttpServletRequest request, HttpServletResponse response){
        FileSaver fs = new FileSaver(request, response);
        //保存文件 docPath + fs.getFileName()文件地址加名字
        fs.saveToFile(docPath + fs.getFileName());
        fs.close();
    }


}

记得拦截那里要放行

        filterRuleMap.put("/pageoffice/**", "anon");
        filterRuleMap.put("/Excel.html", "anon");
        filterRuleMap.put("/Word.html", "anon");
        filterRuleMap.put("/*.zz", "anon");
        filterRuleMap.put("/**/*.zz", "anon");
        filterRuleMap.put("/pageoffice.js", "anon");
        filterRuleMap.put("/jquery.min.js", "anon");

完成上面后在本地是没问题

但是在服务器上会出现跨域的问题（我自己项目中的跨域开启了还是无效）

解决跨域

增加CrossFilter类

import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
 * 拦截器，解决前端跨域问题
 * 为了 pageoffice 使用的
*/
@Component
public class CrossFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;

        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

然后在PageofficeController类中加上

    /**
     * 为pageoffice插件跨域用，自己项目的跨越没办法解决
     * @return
     */
    @Bean
    public FilterRegistrationBean crossFilterRegistration() {
        FilterRegistrationBean registration = new FilterRegistrationBean(new CrossFilter());
        registration.addUrlPatterns("/*");
        registration.setName("crossFilter");
        return registration;
    }

Amy_Victoria

关注

3
点赞
踩
27

收藏

觉得还不错? 一键收藏
15
评论
vue+element+springboot前后端分离项目整合pageoffice实现在线编辑Word和Excel跟签章等

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

扫一扫