Java实现在线打开编辑保存PPT_ppt 网页版java插件

项目中有时会需要在线打开PPT并编辑保存。pageoffice可以完美调用本地office在线打开ppt文件，跟本地打开效果一样。还可以在线打开word、excel、pdf等文件，在线办公系统需要用到的功能基本都可以实现，效果还是挺不错的，集成也很简单。

一、环境 

前端：vue2

后端：springboot

二、集成步骤

1、后端pom.xml中导入依赖

    <!--Pageoffice的jar已经打包到maven中央仓库，用下面的方式即可引用 -->
    <dependency>
        <groupId>com.zhuozhengsoft</groupId>
        <artifactId>pageoffice</artifactId>
        <version>5.4.0.3</version>
    </dependency>

 2、启动类中配置pageoffice的授权程序bean（这些都要在权限框架中设置允许访问，不能拦截）

@Bean
    public ServletRegistrationBean pageofficeRegistrationBean() {
        com.zhuozhengsoft.pageoffice.poserver.Server poserver = new com.zhuozhengsoft.pageoffice.poserver.Server();
        poserver.setSysPath("D:\\lic");//设置PageOffice注册成功后,license.lic文件存放的目录
        ServletRegistrationBean srb = new ServletRegistrationBean(poserver);
        srb.addUrlMappings("/poserver.zz");
        srb.addUrlMappings("/posetup.exe");
        srb.addUrlMappings("/pageoffice.js");
        srb.addUrlMappings("/jquery.min.js");
        srb.addUrlMappings("/pobstyle.css");
        srb.addUrlMappings("/sealsetup.exe");
        return srb;//
    }

3、前端vue的index.html页面引用后端根目录下的pageoffice.js

 <!--引用后端项目pageoffice_demo项目根目录下pageoffice.js文件，一定要在vue项目的index.html文件中引用此文件--->
 <script type="text/javascript" src="http://localhost:8086/pageoffice_demo/pageoffice.js"></script>

4、配置代理vue.config.js（transpileDependencies是为了解决ie和vue的兼容）

module.exports = {
    devServer: {
        proxy: {
        '/api': {
          target: 'http://localhost:8086/pageoffice_demo', //"/api"对应后端项目"http://localhost:8086/pageoffice_demo"地址 
          ws: true,
          changeOrigin: true, // 允许跨域
          pathRewrite: {
           '^/api': ''   // 标识替换，使用 '/api' 代替真实的接口地址
          }
        }
      }
    },
	publicPath:"/",
	
	//node_modules里的依赖默认是不会编译的,会导致es6语法在ie中的语法报错,根据报错找到对应的文件夹指定该文件夹或文件需要编译.
	transpileDependencies: ["sockjs-client"]
  }

5、在index.vue页面添加按钮调用POBrowser.openWindowModeless打开OpenPPT.vue页面，通过axios请求后台打开ppt文件的接口 

index.vue页面

<template>
	<div class="Word">
        <input type="button" value="打开ppt" @click="openPPT()"/>
	</div>
</template>
 
<script>
	const axios=require('axios');
	  export default{
	    name: 'Word',
	    data(){
	      return {
	      }
	    },
	    methods:{      
		  openPPT() {
                //第一个参数是路由
			 POBrowser.openWindowModeless('OpenPPT' , 'width=1200px;height=800px;'); 
		  }
	    },
	    mounted: function(){
	     
	    }
	}
</script>

OpenPPT.vue

<template>
	<div class="PPT">
	  <div style="height: 800px; width: auto" v-html="poHtmlCode" />
	</div>
</template>
 
<script>
	const axios=require('axios');
	  export default{
	    name: 'PPT',
	    data(){
	      return {
	        poHtmlCode: '',
	
	      }
	    },
	    created: function(){
	      //由于vue中的axios拦截器给请求加token都得是ajax请求，所以这里必须是axios方式去请求后台打开文件的controller
	      axios.post("/api/SimplePPT/PPT").then((response) => {
	        this.poHtmlCode = response.data;
	
	      }).catch(function (err) {
	        console.log(err)
	      })
	    },
	    methods:{
	      //控件中的一些常用方法都在这里调用，比如保存，打印等等
	      Save(){
	        document.getElementById("PageOfficeCtrl1").WebSave();
	      },
		  Close() {
		    window.external.close();
		  }
	    },
	    mounted: function(){
	      // 将vue中的方法赋值给window
	      window.Save = this.Save;
		  window.Close = this.Close;
		  
		  // 国产操作系统需要加载WPS插件 ppt文件是'x-wpp'
		  if(navigator.userAgent.toLowerCase().indexOf("linux")>0){
		  	setTimeout(()=>document.getElementById('PageOfficeCtrl1').load('PageOfficeCtrl1','x-wpp','59'),1000);
		  }
	    }
	}
</script>
 

6、后端打开打开ppt文件的controller，这块打开ppt用的是普通编辑模式，webopen第二个参数。还有另外一个只读模式，根据自己的需求选择

@RestController
@RequestMapping(value ="/SimplePPT")
public class SimplePPTController {
 
        //获取doc目录的磁盘路径
        private String dir = GetDirPathUtil.getDirPath() + "static/doc/";
 
        @RequestMapping(value ="/PPT")
        @ResponseBody
        public String showPPT(HttpServletRequest request) {
            PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
            poCtrl.setServerPage("/api/poserver.zz");//设置服务页面
            //添加自定义按钮
            poCtrl.addCustomToolButton("保存", "Save", 1);
            poCtrl.addCustomToolButton("关闭", "Close", 21);
            //设置保存页面
            poCtrl.setSaveFilePage("/api/SimplePPT/save");//设置处理文件保存的请求方法
            //打开Word文档
            poCtrl.webOpen("D:\\doc\\SimplePPT\\test.ppt", OpenModeType.pptNormalEdit, "张三");
            return poCtrl.getHtmlCode("PageOfficeCtrl1");
        }
 
 
        @RequestMapping("save")
        public void save(HttpServletRequest request, HttpServletResponse response) {
            FileSaver fs = new FileSaver(request, response);
            fs.saveToFile("D:\\doc\\SimplePPT\\" + fs.getFileName());
            fs.close();
        }
 
}

三、最后效果

右上角还可以选择全屏