pageoffice在vue+springboot前后端分离项目中的应用方法

1.因浏览器禁用插件无法使用内嵌在浏览器内部的pageoffice打开方式,需要使用4.0新增的POBrowser方式来在外部打开一个窗口去在线打开office
故下面介绍的是基于4.0在线打开文档的一种方式

2.因pageoffice提供的示例全部是基于jsp的,所以无法放在vue中使用,所以我只能在后端使用thymleaf模板去做这件事情。

首先可以去pageoffice的官网的下载中心下载最新版的office示例:

pageoffice在vue+springboot前后端分离项目中的应用方法_第1张图片

打开示例中的一个jsp文件如下:
pageoffice在vue+springboot前后端分离项目中的应用方法_第2张图片

JSP中这么写但是我们肯定是用的html不能这么写 我们首先在springboot
pom.xml中引入thymleaf模板,具体设置可以百度

在上面jsp中有黄色的 <% %> 的代码块很容易能看出来是后端的代码,我们要做的就是把这一块移到后台,和前面的页面分开。

我们首先在配置文件中加入几个配置,代码如下:

#########################################
####pageoffice
#########################################
#磁盘目录用来存放PageOffice注册成功之后生成的license.lic文件
posyspath: d:/lic
#设置PageOffice自带印章管理程序的登录密码
popassword: 123456

然后在后端的controller层创建一个pageofficeController,代码如下:

/**
 * @author wj
 * @version 1.0
 * @className pageofficeController
 * @description pageoffice测试
 * @date 2019/11/07 8:30
 */
@Controller
public class pageofficeController {
    @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();
        //设置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("/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的登录密码
        //设置印章数据库文件poseal.db存放目录,该文件在当前demo的“集成文件”夹中
        adminSeal.setSysPath(poSysPath);

        ServletRegistrationBean srb = new ServletRegistrationBean(adminSeal);
        srb.addUrlMappings("/adminseal.zz");
        srb.addUrlMappings("/sealimage.zz");
        srb.addUrlMappings("/loginseal.zz");
        return srb;
    }

    /**
     * 查看word
     *
     * @param request
     * @param map
     * @return
     */
    @RequestMapping(value = "/word", method = RequestMethod.GET)
    public String showWord(HttpServletRequest request, Map<String, Object> map) {
        //--- PageOffice的调用代码 开始 -----
        PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
        poCtrl.setServerPage("/poserver.zz");//设置授权程序servlet
        poCtrl.webOpen("d:\\test.doc", OpenModeType.docAdmin, "张三");
        map.put("pageoffice", poCtrl.getHtmlCode("PageOfficeCtrl1"));
        //--- PageOffice的调用代码 结束 -----
//        ModelAndView mv = new ModelAndView("Word");
        return "readword/Word";
    }

    @RequestMapping("/newword")
    public String tonewword() {
        return "readword/jump";
    }

前端2个HTML放在一个readword文件夹下

jump.html如下


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript"  src="./jquery.min.js">script>
    <script type="text/javascript"  src="./pageoffice.js" id="po_js_main">script>
head >
<body >


body >
<script type="text/javascript">
    setTimeout(load,500);
    function load() {
        // 最新的打开方式,width和height为打开的最外部边框大小
        POBrowser.openWindowModeless('/word','width=1440px;height=860px');
    }
script>
html>

Word.html如下:


<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript"  src="./jquery.min.js">script>
head>
<body>
<div style="width:auto;height:790px;margin: 0 auto;" th:utext="${pageoffice}">
div>
body>
<script type="text/javascript">
script>
html>

最后附上我的项目层次结构:
pageoffice在vue+springboot前后端分离项目中的应用方法_第3张图片

前端调用pageoffice只需要调用接口“/newword”即可。

以上为具体示例,如果有问题可加qq:1016400304

你可能感兴趣的:(后端)