...
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.txt',
reportLoaded: function () {
}
});
viewer.option("availableExports", ['Pdf', 'Xls']);
}
...
其中，前端脚本的核心代码是 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，报表名等参数，即可改写为您自己的业务画面。
...