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文件如下:
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只需要调用接口“/newword”即可。
以上为具体示例,如果有问题可加qq群:535564936