官网
官网示例地址：http://82.156.255.71:8888/Samples6/
开发者帮助中心：www.pageoffice.cn/
配置环境
- 新建一个pageoffice文件夹，用来存放PageOffice的系统文件（如license.lic、客户端安装包等），比如windows环境下创建：D:/pageoffice，linux环境下创建:/root/pageoffice
- 拷贝pageoffice客户端安装程序到上一步创建的pageoffice文件夹下。
-
- 客户端是windows环境：拷贝posetup_6.5.1.2.exe到pageoffice文件夹下；
- 客户端是国产操作系统环境：拷贝对应芯片的PageOffice客户端deb安装包到pageoffice文件夹下；
- 安装客户端
双击 posetup_6.5.1.2.exe
- 下载路径
依赖
如果使用Springboot3，或Tomcat10及以上版本，使用下面的pom.xml配置
<!--pageOffice-->
<dependency>
<groupId>com.zhuozhengsoft</groupId>
<artifactId>pageoffice</artifactId>
<version>6.5.1.2-javax</version>
</dependency>
如果使用Tomcat9及以下的版本，使用下面的pom.xml配置
<dependency>
<groupId>com.zhuozhengsoft</groupId>
<artifactId>pageoffice</artifactId>
<version>6.5.1.2-javax</version>
</dependency>
配置文件
# pageOffice posyspath window
posyspath:
windows: G:\work\xiniu-crm3\pageoffice
liunx: /usr/local/pageoffice
注册核心组件
package com.xiniuds.crm.config.filter;
import com.zhuozhengsoft.pageoffice.poserver.Server;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.servlet.ServletRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
@Configuration
public class ServletConfig {
@Value("${posyspath.windows}")
private String poSysPath_windows;
@Value("${posyspath.liunx}")
private String poSysPath_liunx;
@Bean
public ServletRegistrationBean<Server> pageOfficeRegistrationBean() {
Server poserver = new Server();
String osName = System.getProperty("os.name").toLowerCase();
if (osName.contains("win")) {
poserver.setSysPath(poSysPath_windows);//设置PageOffice注册成功后,license.lic文件存放的目录
} else if (osName.contains("nux")) {
poserver.setSysPath(poSysPath_liunx);//设置PageOffice注册成功后,license.lic文件存放的目录
}
ServletRegistrationBean<Server> srb = new ServletRegistrationBean(poserver);
srb.addUrlMappings("/poserver.zz");
srb.addUrlMappings("/poclient");
srb.addUrlMappings("/sealsetup.exe");
srb.setName("pageOfficeServer");
return srb;
}
}
排除shiro拦截器
项目使用的是 shiro框架
filterChainDefinitionMap.put("/poserver.zz", "anon");
filterChainDefinitionMap.put("/poclient", "anon");
filterChainDefinitionMap.put("/pageoffice.js", "anon");
filterChainDefinitionMap.put("/sealsetup.exe", "anon");
后端代码
@RestController
@RequestMapping(value = "/doc")
public class DocumentController {
//获取doc目录的磁盘路径
private String dir = GetDirPathUtil.getDirPath() + "static/";
@RequestMapping(value="/openFile")
public String openFile(HttpServletRequest request,int file_id,String file_name) {
//file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
//webOpen的第一个参数支持能够输出下载文件的Url相对地址或者文件在服务器上的磁盘路径两种方式
//查看详细，请在"https://www.pageoffice.cn/"搜索“PageOffice属性或方法中涉及到的URL路径或磁盘路径的说明”
poCtrl.webOpen("file://"+dir+file_name, OpenModeType.docNormalEdit, "张三");
return poCtrl.getHtml();//必须
}
@RequestMapping("/saveFile")
public void saveFile(HttpServletRequest request, HttpServletResponse response,int file_id,String file_name) {
//file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
FileSaver fs = new FileSaver(request, response);
fs.saveToFile(dir + file_name);
fs.close();
}
}
前端代码
- 配置代理
在vue.config.js中配置 在proxy 对象中添加如下：
'/dev-api': {
target: 'http://127.0.0.1:8080',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/dev-api': ''
}
}
2. 引用js-pageoffice库。
在package.json文件中添加依赖 但是要与springboot的添加依赖版本前三位数值一致
- 在全局拦截器中添加PageOffice相关配置。
在request.js文件中添加pageOffice代码
// request interceptor
request.interceptors.request.use(config => {
const token = storage.get(ACCESS_TOKEN)
// 如果 token 存在
// 让每个请求携带自定义 token 请根据实际情况自行修改
if (token) {
config.headers['Access-Token'] = token
// 处理pageOffice
config.headers['Authorization'] = 'Bearer ' + token // 将token添加到请求头中
// PageOffice全局配置，必须在此拦截器中定义
// 必须。设置后端代理,具体属性值以您实际开发为准,比如POBrowser.setProxyBaseAPI(process.env.VUE_APP_BASE_API);
POBrowser.setProxyBaseAPI('/dev-api')
// 必须。向PageOffice后端请求设置header，支持多次调用setHeader()设置更多的值，具体属性名称和属性值以您实际开发为准。
POBrowser.setHeader('Authorization', 'Bearer ' + token)
}
return config
}, errorHandler)
4. 新建一个Vue页面：src/views/onlineDocumentsManage/DocView.vue，用来显示在线打开的文档。
<template>
<div class="doc">
演示: 文档<br /><br />
<!-- 此div用来加载PageOffice客户端控件，其中div的高宽及位置就决定了控件的大小及位置 -->
<div style="width:auto; height:900px;" v-html="poHtmlCode"></div>
</div>
</template>
<script>
import request from '@/utils/request'
export default {
name: 'DocView',
data() {
return {
poHtmlCode: '',
open_params: '',
}
},
created: function () {
//使用pageofficectrl.WindowParams获取获取父页面(此项目中为：HomeView.vue)中POBrowser.openWindow()方法的第三个参数的值,获取到的值为string类型
this.open_params = JSON.parse(pageofficectrl.WindowParams);
// 请求后端打开文件
this.openFile().then(response => {
this.poHtmlCode = response;
}
);
},
methods: {
OnPageOfficeCtrlInit() {
//PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
pageofficectrl.AddCustomToolButton("保存", "Save", 1);//其中"Save"对应methods中的Save()函数，并且需要在mounted中挂载。
},
Save() {
//使用SaveFilePage属性设置后端保存方法的Controller路由地址，这个地址必须从"/"开始，并且也可以向此路由地址传递json字符串参数，示例如下：
let saveFileUrl = "/doc/saveFile";
let paramValue = new URLSearchParams(this.open_params);//为了简单起见，这里直接使用打开时的参数。
pageofficectrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
//在这里写您保存前的代码
pageofficectrl.WebSave();
//在这里写您保存后的代码，比如判断保存结果pageofficectrl.CustomSaveResult
//alert(pageofficectrl.CustomSaveResult);
},
AfterDocumentOpened() {
//在这里写您文档打开后自动触发的代码
},
openFile() {
//发起GET请求到后端Controller的/doc/openFile路由
return request({
url: '/doc/openFile',
method: 'get',
params: this.open_params
})
}
},
mounted: function () {
//将当前页面methods中定义的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
window.POPageMounted = this;//此行必须
}
}
</script>
5. 配置DocView.vue的访问路由。
const routes = [
// 其他路由配置项...
// 下面添加DocView.vue的路由
,
{
path: '/showDoc',
name: 'doc',
component: () => import('../views/onlineDocumentsManage/DocView.vue')
}
]
6. 在您的Vue页面（比如HomeView.vue，PageOffice中把这个页面称之为父页面）添加一个打开文件的超链接，点击超链接调用POBrowser对象的openWindow方法，弹出PageOffice浏览器（POBrowser）窗口访问DocView.vue在线打开文件，代码如下：
<a href="#" @click.prevent="open_pageoffice()">打开文件</a>
<script>
import request from '@/utils/request'
import { POBrowser } from 'js-pageoffice'
export default {
name: 'HomeView',
methods: {
open_pageoffice() {
let paramJson={};
paramJson.file_id=1;
paramJson.file_name="test.doc";
let paramString=JSON.stringify(paramJson);
//openWindow()第三个参数用来向弹出的PageOffice浏览器（POBrowser）窗口传递参数(参数长度不限)，支持json格式字符串。
//此处为了方便演示，我们传递了file_id和file_name两个参数，具体以您实际开发为准。
POBrowser.openWindow('/showDoc', 'width=1150px;height=900px;',paramString);
},
}
}
</script>
整合出现的问题
由于请求都需要经过shiro框架，而shiro框架会将请求的HttpServletRequest进行参数进行包装消费
这样导致继承servlet的类并且重新doPost方法中无法通过 getParameter('')方法获取域中值
而pageOffice的实现就是通过继承servlet类重新doPost方法，若不处理就会导致如下请求无法获取参数值
/poserver.zz，/poclient，/pageoffice.js，/sealsetup.exe
所以要在shiro拦截前处理，处理请求数据
- 编写拦截器
package com.xiniuds.crm.config.filter;
import org.springframework.web.filter.OncePerRequestFilter;
import org.springframework.web.util.ContentCachingRequestWrapper;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class RequestBodyCacheFilter extends OncePerRequestFilter {
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
throws ServletException, IOException {
request.getParameter("Info"); // 在这里必须要获取，不知道为什么
request.getParameter("params");
// 只有不是 ContentCachingRequestWrapper 时才包装
if (!(request instanceof ContentCachingRequestWrapper)) {
request = new ContentCachingRequestWrapper(request);
}
// while (request instanceof ShiroHttpServletRequest) {
// request = (HttpServletRequest) ((ShiroHttpServletRequest ) request).getRequest();
// }
filterChain.doFilter(request, response);
}
}
2. 将该拦截器进行注册
package com.xiniuds.crm.config.filter;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
@Configuration
public class FilterConfig {
/**
* 处理pageOffice
* @return
*/
@Bean
public FilterRegistrationBean<RequestBodyCacheFilter> requestBodyCacheFilter() {
FilterRegistrationBean<RequestBodyCacheFilter> registrationBean = new FilterRegistrationBean<>();
registrationBean.setFilter(new RequestBodyCacheFilter());
registrationBean.addUrlPatterns("/poserver.zz");
registrationBean.addUrlPatterns("/poclient");
registrationBean.addUrlPatterns("/sealsetup.exe");
registrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE); // 最高优先级，最先执行
return registrationBean;
}
}
