将knowage(spagobi)页面嵌套到web应用

接到任务需要将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>
    1. 效果图
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时可以看下具体的源码改成自己需要

应该会写一系列文章，包含如何安装、配置、设计和其它系统集成等(我也不知道什么时候才能写，哈哈哈)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 全栈开发自学路线
    前言 这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同...
    筑梦师Winston阅读 26,210评论 80赞 514
  • 面试题
    一：什么是闭包？闭包的用处？ （1）闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就 是将函数内部和函数外...
    xuguibin阅读 9,818评论 1赞 52
  • 2018你好，2017再见
    雪色浮动在寒凉的窗棂，一环一环的彩灯把旧故事串起，告别总这样无声无息，听着新年的钟声当当响起。岁月，又将翻...
    心如爱止水阅读 352评论 0赞 1
  • 窗台的菜花，开了
    早春三月，春风吹到了窗前，催长了菜叶，催开了菜花。金黄色的花瓣，发出幽幽清香…… 我把买回来的白菜，将菜叶一层层掰...
    春之原野阅读 1,178评论 8赞 11
  • 花儿与少年
    少年从花儿的故乡走出来，跟着他的父母，带着拉面手艺，从大西北来到我们这个沿海的小镇。 西北风历练的少年，跟小镇...
    杨家有女阅读 252评论 0赞 0