ActiveReport14爬坑指南-JavaWeb项目如何调用JSviewer报表服务

本文链接：https://blog.csdn.net/QIANG_HAO/article/details/106284936

1. 将JSviewer所需文件引入web项目

将ASP.net项目下的wwwroot文件复制web项目中，以便页面的样式和函数加载
在这里插入图片描述

2. 创建Jsp页面

jsp页面代码参考：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- IIS Virtual Directory name -->
  <!--<base href="/JSViewer_MVC/">-->

  <title>测试报表</title>
  <meta charset="utf-8">
  <link rel="bookmark" href="/image/favicon.ico" type="image/x-icon"/>
  <jsp:include page="/initlib/initCommon.jsp"></jsp:include>
  <jsp:include page="/initlib/initReport.jsp"></jsp:include>
  
  <link rel='shortcut icon' type='image/x-icon' href='${pageContext.request.contextPath}/js/report/wwwroot/favicon.ico' />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link href="${pageContext.request.contextPath}/js/report/wwwroot/jsViewer.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/js/report/wwwroot/index.css" rel="stylesheet">
</head>

<body>
	<div class="easyui-layout" data-options="fit:true,border:false" style="width:100%;border: 0px;">
	    <div data-options="region:'north',border:false" style="height:37px;">
	        <table style="margin:4px 0px 0px 0px" class="form-inline">
	            <tr>
	            	<td>
	                    <label class="l-btn-text">&nbsp;关键字</label>
	                </td>
	                <td>
	                    <input type="text" class="form-control sel" id="keyWords" style="width:200px"  placeholder="测试...">
	                </td>
	                <td>
	                    <a onclick="initReport();" href="javascript:void(0);"
	                       class="easyui-linkbutton ebsButton"
	                       data-options="iconCls:'fa fa-1x fa-fw fa-plus-square-o',plain:true" style="font-size:16px; margin-left: 2px;">查询</a>
	                </td>
	                <td>
	                    <a onclick="exportReport();" href="javascript:void(0);"
	                       class="easyui-linkbutton ebsButton"
	                       data-options="iconCls:'fa fa-1x fa-fw fa-edit',plain:true" style="font-size:16px;">导出</a>
	                </td>
	            </tr>
	        </table>
	    </div>
	    <div data-options="region:'center',split:true">
	        <div style="height:100%;width:100%;">
	            <table id="viewerContainer"></table>
	        </div>
	    </div>
	</div>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/report/wwwroot/jsViewer.min.js"></script>
  <script type="text/javascript">
	let viewer;
  	$(function () {
  	    initFormElement();								//初始化页面元素
		//将报表控件初始化函数initReportElement()写在了common.js中，以便复用;
		viewer = initReportElement();					//初始化报表元素 
  		initReport();									//加载报表
  	});
  	
    function initFormElement(){
    	
    };
  	
  	function initReport(){
        let reportName = "v_comm_user.rdlx";			//报表名称.rdlx
      													//数据表
        let viewFrom = "select * from t_comm_user a where 1=1";
        
        let viewParam = "";								//查询条件
        var userid = $("#keyWords").val();
        if(userid != ""){
	        viewParam += " and (";
	        viewParam += " a.name_ like '%"+ userid+"%'";
	        viewParam += " or a.id_ like '%"+ userid+"%'";
	        viewParam += " )";        	
        }
        let sql = viewFrom + viewParam;					//拼接报表初始化参数
        let encodeSql = encodeURI(sql);					//encode转码
        let reportsArray = reportName + ";" + encodeSql;
        viewer.openReport(reportsArray);				//初始化报表
  	}
    
    function exportReport() {
        if (viewer.pageCount == 0) {
        	layer.msg('请先查询报表！', {icon: 0});
            return;
        };
    	viewer.export(
   			'Xls', 										//指定导出文件格式
   			function (uri) {							//callback回调函数
   				if (uri) {
                    var newWin = null;
                    try {
                        newWin = window.open(uri);
                    } catch (e) {
                    }
                    newWin || (window.location = uri);
                }
    		}, 
   			false,										//另存为对话框
   			{ FileName: 'Test1.xls', MultiSheet: false }//RenderingExtensions 里面的可设置的导出属性
   		);											
    }
  </script>
</body>
</html>

3. 主要函数说明

3.1 GrapeCity.ActiveReports.JSViewer.create 创建报表viewer实例

在jsp页面调用报表控件创建方法（可以将该函数写入common.js中，以便复用），该方法会新建一个新的Viewer 实例，并在指定的 DOM 元素中加载它。

	viewer = GrapeCity.ActiveReports.JSViewer.create({
		element: '#viewerContainer',
        availableExports: ['Xls'],
		reportService: {
			//url: "http://192.168.1.160:9093/api/reporting/"
			url: serverUrl
		}
	});

参数说明：

element ：JQuery 选择器，用于绑定JSViewer 的宿主对象

availableExports：是用于设置所提供的导出文件的格式，在不设置该选项时候，JSViewer 默认是支持所有格式导出，PDF, Excel, Word, JSON, XML, CSV, 图像

reportService：包含URL 及可选的securityToken 属性的对象

common.js完整代码：

function initReportElement(){
	let serverUrl;
	let viewer;
    var url = "";
    var pathName = window.document.location.pathname;
    //获取带"/"的项目名，如：/Tmall
    $.basePath = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    url = url + $.basePath;
	
	$.ajax({
	    type: "GET",
	    dataType: "json",
	    url: url+"/sys/config/getConfig.do",
	    async: false,
	    success: function (data) {
	        serverUrl = data.obj.ReportWebService_new;
	    },
	    error: function () {
	
	    }
	});
	viewer = GrapeCity.ActiveReports.JSViewer.create({
		element: '#viewerContainer',
        availableExports: ['Xls'],
		reportService: {
			//url: "http://192.168.1.160:9093/api/reporting/"
			url: serverUrl
		}
	});
    viewer.sidebar.toggle(false);
	return viewer
}

3.2 viewer.openReport(reportsArray); 初始化报表及数据

openReport(reportID: string, reportParameters?: Array): void
该方法会加载指定的报表文件
示例：viewer.openReport(‘v_comm_user.rdlx’);
我们可以将sql拼接在reportID之后，以便后期绑定动态数据源

function initReport(){
        let reportName = "v_comm_user.rdlx";			//报表名称.rdlx
      													//数据表
        let viewFrom = "select * from t_comm_user a where 1=1";
        
        let viewParam = "";								//查询条件
        var keyWords = $("#keyWords").val();
        if(keyWords != ""){
	        viewParam += " and (";
	        viewParam += " a.name_ like '%"+ keyWords +"%'";
	        viewParam += " or a.id_ like '%"+ keyWords +"%'";
	        viewParam += " )";        	
        }
        let sql = viewFrom + viewParam;					//拼接报表初始化参数
        let encodeSql = encodeURI(sql);					//encode转码
        let reportsArray = reportName + ";" + encodeSql;
        viewer.openReport(reportsArray);				//初始化报表
  	}

3.3 exportReport 导出当前报表

function exportReport() {
        if (viewer.pageCount == 0) {
        	layer.msg('请先查询报表！', {icon: 0});
            return;
        };
    	viewer.export(
   			'Xls', 										//指定导出文件格式
   			function (uri) {							//callback回调函数
   				if (uri) {
                    var newWin = null;
                    try {
                        newWin = window.open(uri);
                    } catch (e) {
                    }
                    newWin || (window.location = uri);
                }
    		}, 
   			false,										//另存为对话框
   			{ FileName: 'Test1.xls', MultiSheet: false }//RenderingExtensions 里面的可设置的导出属性
   		);											
    }

参数说明：

viewer.pageCount：获取当前报表的总页数

viewer.export：导出当前报表

export(exportType,callback,saveAsDialog,settings)

exportType : 指定导出格式

callback : 回调函数

saveAsDialog：是否另存为

settings： RenderingExtensions所提供的导出设置

MultiSheet：设置为false可以将多页报表到入到一个sheet页中，否则它会将多页报表分别导入到不同的sheet页中