Vue3.x+springboot集成pageoffice

最新推荐文章于 2024-06-04 08:56:30 发布

response_L

最新推荐文章于 2024-06-04 08:56:30 发布

阅读量3.7k

点赞数 2

分类专栏： pageoffice 文章标签： spring boot java vue

本文链接：https://blog.csdn.net/qq_44306545/article/details/127764411

版权

pageoffice 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

说明：由于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>