0
点赞
收藏
分享

微信扫一扫

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

烟中雯城 2022-03-30 阅读 20
springbootjavavue

因为公司业务的需求，需要在线编辑word等的功能，老板跟我说了pageoffice这个工具，说之前也用过。官网有教程，但是太精简了，不适合我这个前端不太好的。然后上网上找了一堆教程，也都没找到符合现在项目情况的，而且很多教程缺东缺西，写个教程当自己记录一下。

先展示下效果

 

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

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

因为vue里不能使用<script type="text/javascript" src="http://localhost:9528/dev-api/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 = './';

然后在前端项目的public文件夹下创建html文件

test.html

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

前端部分结束了

后端部分

首先加入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中配置

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

然后在resources里增加templates文件夹，在里面放页面

 Excel.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>打开Excel文件</title>
        <script type="text/javascript">
          	function Save() {
              	document.getElementById("PageOfficeCtrl1").WebSave();
        	}
        </script>
        <script type="text/javascript">
         function AddSeal() {
			try{
        		  document.getElementById("PageOfficeCtrl1").ZoomSeal.AddSeal();
			}catch (e){ };
        	}
  		</script>
        
    </head>
    <body>
        <div style="width:auto;height:700px;" th:utext="${pageoffice}"></div>
    </body>
</html>

 Word.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>打开Word文件</title>
        <script type="text/javascript">

          	function Save() {
              	document.getElementById("PageOfficeCtrl1").WebSave();
        	}

        	//盖章
           function AddSeal() {
			try{
        		  document.getElementById("PageOfficeCtrl1").ZoomSeal.AddSeal();
			}catch (e){ };
        	}

        	//关闭窗口并刷新页面
            function ClosePage() {
                //这个fefresh()方法是写在前端项目的POBrowser的父页面的，在openWindowModeless()方法所在页面
                window.external.CallParentFunc("refresh();");
                window.external.close();

            }
        </script>
    </head>
    <body>
        <div style="width:auto;height:700px;" th:utext="${pageoffice}"></div>
    </body>
</html>

创建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;//
    }


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


    @RequestMapping(value="/word", method= RequestMethod.GET)
    public ModelAndView showWord(HttpServletRequest request, Map<String,Object> map){

        PageOfficeCtrl poCtrl=new PageOfficeCtrl(request);
        //有项目名才要加上
        poCtrl.setServerPage("/dev-api/poserver.zz");//设置服务页面
        poCtrl.addCustomToolButton("保存","Save",1);//添加自定义保存按钮
        poCtrl.addCustomToolButton("盖章","AddSeal",2);//添加自定义盖章按钮
        poCtrl.addCustomToolButton("关闭并刷新父页面","ClosePage",21);//添加关闭按钮
        //有项目名才要加上，然后补充好接口的路径
        poCtrl.setSaveFilePage("/dev-api/pageoffice/save");//设置处理文件保存的请求方法
        //打开word
        poCtrl.webOpen("file://"+docPath+"test.doc", OpenModeType.docAdmin,"张三");
        map.put("pageoffice",poCtrl.getHtmlCode("PageOfficeCtrl1"));

        ModelAndView mv = new ModelAndView("Word");
        return mv;
    }

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

        PageOfficeCtrl poCtrl=new PageOfficeCtrl(request);
        //有项目名才要加上
        poCtrl.setServerPage("/dev-api/poserver.zz");//设置服务页面
        poCtrl.addCustomToolButton("保存","Save",1);//添加自定义保存按钮
        poCtrl.addCustomToolButton("盖章","AddSeal",2);//添加自定义盖章按钮
        //有项目名才要加上，然后补充好接口的路径
        poCtrl.setSaveFilePage("/dev-api/pageoffice/save");//设置处理文件保存的请求方法
        //打开word
        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);
        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");
举报

相关推荐

Dcoekr 部署前后端分离项目SpringBoot +Vue

python开发语言

Vue和FastAPI实现前后端分离

javaspring boot数据库

Springboot+Vue前后端分离项目的部署

vue.jsspring bootjava云服务器

SpringBoot + Vue 前后端分离项目 微人事(九)

spring bootvue.js后端

SpringBoot+Vue前后端分离项目排错思路

vue.js前端javascript微服务排错Linux系统/运维

后端SpringBoot+前端Vue前后端分离的项目（一）

前端后端

SpringBoot+Vue实现前后端分离的在线考试报名系统

spring bootvue.js后端java在线考试报名系统

CentOS使用kkFileView实现在线预览word excel pdf等

c++面试判断素数判断质数

SpringBoot + Vue前后端分离项目实战 || 四：用户管理功能实现

java-rabbitmqrabbitmq中间件

maven+vue+servlet+element+MyBatis 前后端分离小项目

mavenservletvueelementmybatisLinux系统/运维
0 条评论