8.3.3 原生页面集成

原生页面集成是指将报表内容完全嵌入在业务系统的网页中。这种集成模式的核心是编写javascript代码，调用葡萄城报表提供的HTML5 Viewer前端对象。提供HTML5 Viewer对象的是一个GrapeCity.ActiveReports.Viewer.Html.js文件，该文件保存在葡萄城报表安装目录下的portal\viewer文件夹中，默认路径是：C:\葡萄城报表服务器\Site\portal\viewer。

下面是一个集成了报表功能的HTML网页示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>葡萄城报表集成</title>
<link href="ActiveReports/css/theme-cosmo.css" rel="stylesheet" type="text/css" />
<link href="ActiveReports/css/GrapeCity.ActiveReports.Viewer.Html.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body, html
{
height: 100% !important;
}

body
{
margin: 0px;
overflow:auto;
}

.viewer
{
height: 100% !important;
width: 70%;
display: inline-block;
}

.top
{
margin: 10px 10px 10px 10px;
font-family: 微软雅黑;
}
</style>

// Authorization token
var _token;

$(function () {

$(window).bind('beforeunload', function () {
viewer.destroy();
});

var serverUrl = $('#ReportServer').val();
var userName = $('#ArsUserName').val();
var userPassword = $('#ArsUserPassword').val();
var reportName = $('#ReportName').val();
var divId = "#viewerContainer";
showReport(serverUrl, userName, userPassword, reportName, divId);

});

function showReport(serverUrl, userName, userPassword, reportName, divId) {

var token;

var params = {
user: userName,
password: userPassword,
};
$.when(
// 登录
token = loginArs(serverUrl, userName, userPassword)
)
.then(
// 显示报表
ShowReportInViewer(serverUrl, token, reportName, divId)
);
}

function loginArs(serverUrl, userName, userPassword)
{

var params = {

user: userName,
password: userPassword,
};

var token;

$.ajax({
type: "POST",
url: serverUrl + '/api/accounts/login',
data: JSON.stringify(params),
contentType: "application/json",
dataType: "json",
async: false, // 同步调用，等待返回
success: function (data) {
token = data['Token'];
}
});
return token;
}

</script>
</head>
<body>
<div class="top">
本页面展示内容：直接在业务应用程序的页面内显示报表。 <br />
这种集成方法完全基于前端JavaScript调用，既不依赖于iframe，也不需要跳转到新的浏览器窗口，因此是推荐的集成方式。<br />
<p id="loginErrorMessage"></p>
<table style="display:none;">
<tr><td> </td>

<td>报表服务器:</td>
<td>
<input type="text" style="width:200px;" value="http://ars.grapecity.com.cn:80" name="ReportServer_NoUse" id="ReportServer" />
<input type="text" style="width:200px;" value="demo" id="ArsUserName" />
<input type="text" style="width:200px;" value="123456" id="ArsUserPassword" />
</td>
</tr>
<tr>
<td>
 
</td>
<td>
报表:
</td>
<td>
<input type="text" style="width:200px;" value="看板" name="ReportName" id="ReportName" />
</td>
</tr>
</table>
<br />
</div>
<div id="viewerContainer" class="viewer">
</div>
</body>
</html>

其中，前端脚本的核心代码是 showReport 函数，该函数先调用报表系统的API（api/accounts/login）登录到报表系统，获取一个令牌（token），再用 GrapeCity.ActiveReports.Viewer 对象获取指定报表的内容，然后将报表内容嵌入到一个id为viewerContainer的DIV元素中。从用户的角度看，报表内容与页面其他内容都是普通的HTML元素。

请注意代码中被注释掉的parameters部分，是用于从业务系统向报表传递参数的。参数列表整体以JSON字串形式传递，单个参数的基本形式是 name:xxx,value:yyy 。对于多值参数，必须指定 multivalue:true。下面是一个参数列表示例：

parameters: [{ name: 'P1', multivalue: true, values: ['1', '3'] }, { name: 'P2', value: $("#txtParameter2").val() }]

在这个页面基础上，只需要修改页面隐藏域中的用户名、密码、报表服务器的URL，报表名等参数，即可改写为您自己的业务画面。

此示例页面使用纯静态HTML编写，无论您的业务系统采用何种语言编程（比如JSP,PHP,ASP等），均可将以上各项参数改写为动态内容，尤其是用户名、密码等敏感信息，可改为从Session或其他途径获得，不要硬编码在网页中。

有关葡萄城报表的HTML5报表查看器前端对象的详细信息，请参考：

HTML5报表查看器

Page tree

8.3.3 原生页面集成