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

程序员文章站 2022-03-08 17:55:22

...

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

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

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

打开示例中的一个jsp文件如下：
pageoffice在vue+springboot前后端分离项目中的应用方法

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如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"  src="./jquery.min.js"></script>
    <script type="text/javascript"  src="./pageoffice.js" id="po_js_main"></script>
</head >
<body >
<!--<a href="javascript: ">123123</a>-->

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

Word.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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前后端分离项目中的应用方法

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

以上为具体示例，如果有问题可加qq群：535564936