Vue3.x+springboot集成pageoffice
说明：由于pageoffice浏览器是ie内核，vue3不兼容ie。所以需要把页面放在后端
一，前端项目：
1、index.html页面引用pageoffice.js
<script type="text/javascript" src="http://localhost:8081/springboot-pageoffice-demo/pageoffice.js"></script>
2、在index.vue页面添加一个按钮，调用POBrowser.openWindowModeless请求后端。
http://localhost:8081/springboot-pageoffice-demo/SimpleWord/Word2 是后端打开文件的controller
POBrowser.openWindowModeless('http://localhost:8081/springboot-pageoffice-demo/SimpleWord/Word2', 'width=1150px;height=900px;');
二、后端项目
1、打开文件的controller，返回ModeAndView，后端html模板一般用thymeleaf或者freemarker
@RequestMapping(value="SimpleWord/Word2")
public ModelAndView showWord(HttpServletRequest request){
PageOfficeCtrl poCtrl=new PageOfficeCtrl(request);
poCtrl.setServerPage(request.getContextPath()+"/poserver.zz");//设置服务页面
poCtrl.addCustomToolButton("保存","Save",1);//添加自定义保存按钮
poCtrl.setSaveFilePage("/saveFile");//设置处理文件保存的请求方法
//打开word
poCtrl.webOpen("D:\\doc\\template.doc",OpenModeType.docNormalEdit,"张三");
request.setAttribute("pageoffice",poCtrl.getHtmlCode("PageOfficeCtrl1"));
ModelAndView mv = new ModelAndView("Word");
return mv;
}
setServerPage中saveFile保存文件的方法
@RequestMapping(value="/saveFile")
public void saveFile(HttpServletRequest request, HttpServletResponse response){
FileSaver fs = new FileSaver(request, response);
fs.saveToFile("D:\\doc\\"+ fs.getFileName());
fs.close();
}
2、Word.html页面，我用的thymeleaf
<!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>
</head>
<body style="overflow: hidden">
<script type="text/javascript">
//保存文件
function Save() {
document.getElementById("PageOfficeCtrl1").WebSave();
}
</script>
<div style="width:auto;height:730px;" th:utext="${pageoffice}"></div>
</body>
</html>
原文链接：https://blog.csdn.net/qq_44306545/article/details/127764411
