接到任务需要将knowage将与现有的自研报表整合，研究了下做些记录,欢迎讨论
一、环境准备
- 1.假设已完成knowage安装(本文使用6.1.0_ce)
- 2.假设web应用和knowage不在同一个域(一般情况应该都在不同的域，需要解决跨域问题)
- 3.准备一个springboot的带jsp应用(不一定springboot，spingmvc的也可以)
- 4.准备sdk，下载地址(包含所有knowage版本、开发工具、sdk)：http://release.ow2.org/knowage/
- 5.准备一个vue应用(适用于前后端分离项目的集成)【备选方案】
二、使用knowage的java sdk方式
解压下载的knowage的war包
-
1.目录结构
knowae目录结构.png - 2.复制需要的包
1. 复制 WEB-INF\tags\spagobi\execution.tag 到web项目的 WEB-INF\tags\spagobi目录下
2. 复制 WEB-INF\lib 下面的jar到classpath
3. 如果是maven项目请上传必要的jar到公司私有仓库（备选）
<dependency>
<groupId>it.eng.knowage</groupId>
<artifactId>knowage-utils</artifactId>
<version>6.1.1</version>
</dependency>
<dependency>
<groupId>it.eng.knowage</groupId>
<artifactId>spago-core</artifactId>
<version>2.3.0</version>
</dependency>
<dependency>
<groupId>it.eng.knowage</groupId>
<artifactId>spago-web</artifactId>
<version>2.3.0</version>
</dependency>
<dependency>
<groupId>it.eng.knowage</groupId>
<artifactId>spago-portlet</artifactId>
<version>2.3.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.7.5</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.5</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.7.5</version>
</dependency>
- 3.jsp页面中引用
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<!DOCTYPE html>
<%@ taglib prefix="spagobi" tagdir="/WEB-INF/tags/spagobi" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<spagobi:execution spagobiContext="http://192.200.9.120:8080/knowage"
documentLabel=" Project"
userId="biadmin"
password="biadmin"
iframeStyle="height:500px; width:100%"
executionRole="GUEST"
displayToolbar="<%= Boolean.TRUE %>"
displaySliders="<%= Boolean.TRUE %>"/>
</body>
</html>
- 效果图
jsp集成结果.png
三、使用knowage的java script方式
使用原生js sdk的优势在于不限制后端语言，但是需要解决cors跨域的问题
- 1.复制需要的包
复制 knowagesdk\js 下面js到 webapp\js 下
- 2.在jsp页面引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/commons.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jsonp.js"></script>
<script type="text/javascript" src="js/cors.js"></script>
<script type="text/javascript" src="js/services.js"></script>
<script type="text/javascript" src="js/api_jsonp.js"></script>
<script type="text/javascript" src="js/api_cors.js"></script>
<script type="text/javascript" src="js/api.js"></script>
</head>
<body>
<input type="button" value="Login" onclick="javascript:doLogin()"/>
<div height="300px" width="100%" id='targetDiv'></div>
</body>
<script type="text/javascript">
Sbi.sdk.services.setBaseUrl({
protocol: 'http'
, host: '192.200.9.120'
, port: '8080'
, contextPath: 'knowage'
, controllerPath: 'servlet/AdapterHTTP'
});
doLogin = function() {
var user = 'biadmin';
var password = 'biadmin';
var cb = function(xhr) {
Sbi.sdk.api.injectDocument({
documentLabel: 'Project'
, documentName: 'Project'
, executionRole: 'biadmin'
, target: 'targetDiv'
, height: '500px'
, width: '800px'
, iframe: {
style: 'border: 0px;'
}
});
};
Sbi.sdk.cors.api.authenticate({
credentials: 'user=' + user + '&password=' + password
, headers: [{
name: 'Content-Type',
value: 'application/x-www-form-urlencoded'
}]
, callbackOk: cb
})
}
</script>
</html>
- 3.解决跨域
直接在浏览器访问，页面会报500错误，使用f12查看会有跨域错误的提示
1.下载需要的jar
cors-filter-2.5.jar
java-property-utils-1.9.1.jar
2.修改knowage系统下的tomcat
将jar放入Knowage-Server-CE\lib下
修改Knowage-Server-CE\conf\web.xml，如下：
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
-
4.效果图
使用js sdk效果.png
四、在vue中使用js sdk
- 1.复制需要的js
复制 knowagesdk\js 下面js到 static\js 下
在index.html引入：
<script type="text/javascript" src="./static/js/commons.js"></script>
<script type="text/javascript" src="./static/js/ajax.js"></script>
<script type="text/javascript" src="./static/js/jsonp.js"></script>
<script type="text/javascript" src="./static/js/cors.js"></script>
<script type="text/javascript" src="./static/js/services.js"></script>
<script type="text/javascript" src="./static/js/api_jsonp.js"></script>
<script type="text/javascript" src="./static/js/api_cors.js"></script>
<script type="text/javascript" src="./static/js/api.js"></script>
- 2.创建vue.js页面
<template>
<div class="deptNeedListContent">
<input type="button" value="Login" onclick="javascript:doLogin()" />
<div height="300px" width="100%" id='targetDiv'></div>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
doLogin() {
Sbi.sdk.services.setBaseUrl({
protocol: 'http',
host: '192.200.9.120',
port: '8080',
contextPath: 'knowage',
controllerPath: 'servlet/AdapterHTTP'
});
var user = 'biadmin';
var password = 'biadmin';
var cb = function(xhr) {
Sbi.sdk.api.injectDocument({
documentLabel: 'Project',
documentName: 'Project',
executionRole: 'biadmin',
target: 'targetDiv',
height: '500px',
width: '800px',
iframe: {
style: 'border: 0px;'
}
});
};
Sbi.sdk.cors.api.authenticate({
credentials: 'user=' + user + '&password=' + password,
headers: [{
name: 'Content-Type',
value: 'application/x-www-form-urlencoded'
}],
callbackOk: cb
})
}
},
mounted() {
this.doLogin();
}
}
</script>
<style>
.el-table th>.cell {
color: #000;
}
</style>
- 3.解决跨域问题请看章节三
五、总结
- 1.knowage为spago bi新命名网上的资料不是很多，做页面集成时参考了很多spago bi以前的版本方案
- 2.knowagesdk提供的时一个war包里面有一些集成的example可以参考
- 3.使用js sdk时可以看下具体的源码改成自己需要
应该会写一系列文章，包含如何安装、配置、设计和其它系统集成等(我也不知道什么时候才能写，哈哈哈)
