项目中有时会需要在线打开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();
}
}
三、最后效果
右上角还可以选择全屏