原生页面集成是指将报表内容完全嵌入在业务系统的网页中。这种集成模式的核心是编写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><script src="ActiveReports/Scripts/jquery-2.1.0.js" type="text/javascript"></script>
<script src="ActiveReports/Scripts/bootstrap-3.1.1.js" type="text/javascript"></script>
<script src="ActiveReports/Scripts/knockout-3.1.0.js" type="text/javascript"></script>
<script src="ActiveReports/Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>
<script type="text/javascript">
// 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);
});
...
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;
}
function ShowReportInViewer(serverUrl, token, reportName, divId) {
var viewer;
viewer = GrapeCity.ActiveReports.Viewer({
element: divId, //'#viewerContainer',
reportService: {
url: serverUrl + '/api/',
securityToken: token
, resourceHandler: serverUrl + '/cache/'
},
report: {
id: reportName
//, parameters: [{ name: 'MultiValueParameter1', multivalue: true, values: null }, { name: 'Parameter1', value: null }, { name: 'Parameter2', value: null }]
},
uiType: 'desktop',
localeUri: 'zh.properties', // zh.properties文件为报表查看器界面文字资源文件，可在报表系统安装目录下的 \Site\i18n\viewer 文件夹中找到。
reportLoaded: function () {
}
});
viewer.option("availableExports", ['Pdf', 'Xls']);
}
</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报表查看器前端对象的详细信息，请参考：
8.3.3.2 HTML5报表查看器3.1 原生页面集成示例