历史版本6 :URL参数传递给iframe中的报表 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 版本
报表服务器版本 | JAR 包 | 插件版本 | App 版本 |
---|---|---|---|
10.0 | 2019-10-15 |
1.2 应用场景
场景1:使用 HTML 的 iframe 嵌入报表,并使用 JS 获取 URL 的参数以及报表相对路径,并将 URL 的参数传入嵌入报表
2. 操作步骤编辑
将报表生成网页时,给网页添加 onload 事件,首先获取 URL 中的参数,然后嫁接到 iframe 的 src 上,或者通过获得的参数拼接出完整的报表 URL 赋给 iframe 的 src。
代码如下:
<html>
<head>
<title>FineReport Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
<script type="text/javascript">
function autoLoad(){
//返回从问号 (?) 开始的 URL(查询部分)
var paraString = location.search;
//多个参数用&分隔,将参数字符串转为数组,使每个参数值存于一个数组元素中
var paras = paraString.split("&");
//每个数组元素中"="后面的值即参数值
var reportName = paras[0].substr(paras[0].indexOf("=") + 1); //获取报表的相对路径
var area = paras[1].substr(paras[1].indexOf("=") + 1); //获取报表的第一个参数
var province = paras[2].substr(paras[2].indexOf("=") + 1); //获取报表的第二个参数
var city = paras[3].substr(paras[3].indexOf("=") + 1); //获取报表的第三个参数
//使用获取的参数值拼接出最终的url
var reportURL = "/webroot/decision/view/report?viewlet=" + reportName + "&area=" + area + "&province=" + province + "&city=" + city;
//URL 中可能包含中文或特殊字符因此需要进行编码转换,注意需要先引入 finereport.js
reportURL = encodeURI(reportURL);
//将新的报表路径赋给报表所在 iframe 的 src
document.getElementById("reportFrame").src = reportURL;
}
//加载网页时调用autoLoad方法
window.onload = autoLoad;
</script>
</head>
<body>
<iframe id="reportFrame" width="900" height="400"></iframe>
</body>
</html>
上述的 HTML 文件详见:3 模板路径
注:reportURL 获取最终 URL 会添加到 iframe 中,本例子使用改路径下 doc/Parameter/MultiValue/MultiValue.cpt 报表作为例子,嵌入后的代码如下图:
3 查看效果:编辑
效果图:
或使用管理员登录决策平台,点击管理系统>目录管理,点击添加链接
链接路径为:help/page_demo/geturlpara.html?report=doc/Parameter/MultiValue/MultiValue.cpt&area=华东&province=江苏&city=无锡,名称为:URL 参数传递给 iframe 中的报表,如下图:
效果图:
4. 模板路径编辑
其中嵌入报表路径:doc/Parameter/MultiValue/MultiValue.cpt
HTML 文件路径:FineReport_10.0/webapps/webroot/help/page_demo/geturlpara.html