1、我们捂执涡扔使用模板FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\Bubble.cpt来作为内嵌iframe。首先定义javascr足毂忍珩ipt代码触发放大缩小的功能，代码如下：<script type="text/javascript"> function afterload(){ document.getElementById('reportFrame').contentWindow.contentPane.scale('-'); fuzhi(); } function afterload2(){ document.getElementById('reportFrame').contentWindow.contentPane.scale('+'); fuzhi(); } function fuzhi() { var contentPane = document.getElementById("reportFrame").contentWindow.contentPane; var zoom = contentPane.zoom * 100 +"%"; document.getElementById("zoom").value = zoom; //将新的显示百分比赋给zoom文本框 } </script>
2、其次在body里面直接调用js里面定义好的方法，代码如下：<body onload="fuzhi()"> <div id="toolbar"> <input type="button" onclick="afterload();" value="-"></input> <input id="zoom" type="text" readonly="true" style="width: 80px"> <input type="button" onclick="afterload2();" value="+"></input> </div>
3、完整代码如下<htm盟敢势袂l> <head> <title>FineReport Demo媪青怍牙</title> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> </head><script type="text/javascript"> function afterload(){ document.getElementById('reportFrame').contentWindow.contentPane.scale('-'); fuzhi(); } function afterload2(){ document.getElementById('reportFrame').contentWindow.contentPane.scale('+'); fuzhi(); } function fuzhi() { var contentPane = document.getElementById("reportFrame").contentWindow.contentPane; var zoom = contentPane.zoom * 100 +"%"; document.getElementById("zoom").value = zoom; //将新的显示百分比赋给zoom文本框 } </script> <body> <iframe id="reportFrame" width="900" height="500" src="/WebReport/ReportServer?reportlet=/doc/Advanced/Chart/Bubble.cpt"></iframe> <body onload="fuzhi()"> <div id="toolbar"> <input type="button" onclick="afterload();" value="-"></input> <input id="zoom" type="text" readonly="true" style="width: 80px"> <input type="button" onclick="afterload2();" value="+"></input> </div></body> </html>
4、效果如下
