简述:
JS调用FineReport打印方法
1. 问题描述
报表集成到项目里面,不需要预览模板就能够直接打印报表;或者自定义Web页面里面,使用自定义打印按钮直接调用FineReport内部打印方法。
2. 调用方法
先引入FineReport内部的js文件,然后调用js文件中定义好的内部打印方法,如Flash打印方式调用方法如下:
1. <script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script> //调用报表内部finereport.js文件
2. <link rel="stylesheet" type="text/css" href="/WebReport/ReportServer?op=emb&resource=finereport.css" /> //定义弹出打印对话框的样式
3. <script type="text/javascript">
4. FR.doURLFlashPrint(url); //url为打印的报表路径
5. </script>
3. 报表内置打印方法
FineReport提供了三种客户端打印方式,各自的调用方法如下(三种方法传入的参数是一致的):
打印方式 | 打印方法 | 方法的解释说明 |
Flash打印 | doURLFlashPrint(printurl) | printurl需要打印的模板地址,默认弹出对话框,get方式传参 |
doURLFlashPrint(printurl,isPopUp) | isPopUp判断是否弹出打印对话框参数。默认为true表示需要打印设置框,反之,false则表示不弹出打印对话框 | |
doURLFlashPrint(printurl,isPopUp,config) | config参数,有一个data属性,data属性中定义需要加在请求中的参数如: {data : {param1 : XXX, param2 :XXX, ....}}即post传参 | |
PDF打印 | doURLPDFPrint(参数同上) | 同上 |
Applet打印 | doURLAppletPrint(参数同上) |
具体三种打印效果的介绍可参考文档各打印方式的对比介绍。
4. 示例
4.1 Flash打印为例效果
4.2 实现代码
1. <html>
2. <head>
3. <title>FineReport Demo</title>
4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
5. <script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
6. <link rel="stylesheet" type="text/css" href="/WebReport/ReportServer?op=emb&resource=finereport.css"/>
7. <script type="text/javascript">
8. function doPrint(){
9. var url="http://localhost:8075/WebReport/ReportServer?reportlet="; //端口和ip根据具体情况设定
10. url+=document.report.cpt.value;
11. FR.doURLFlashPrint(url);
12. //FR.doURLFlashPrint(url,false); //不需要弹出打印对话框
13. }
14. </script>
15. </head>
16. <body>
17. <form name="report">
18. <input id="cpt" type="checkbox" value="gettingstarted.cpt"/>gettingstarted.cpt<br>
19. </form>
20. <input type=button name=doprint onclick=doPrint() value='doPrint'></input>
21. </body>
22. </html>
代码可参考WebReport/page_demo/cusprint.html,访问该页面,选中模板点击doprint按钮时,即能看到上述效果。
批量打印
1. 问题描述
多张报表需要打印,一个一个进行打印比较麻烦,此时需要使用批量打印。
下面以PDF打印方式为例
2. 批量打印传入的url格式
批量打印多张报表url格式如:http://localhost:8075/WebReport/ReportServer?reportlets=[{reportlet:'reportname1.cpt',paraname:'paravalue'},{reportlet:'reportname2.cpt',paraname:'paravalue'}]。
调用内置的打印方法直接使用完整的url进行批量打印:
1. var printurl="http://localhost:8075/WebReport/ReportServer?reportlets=[{reportlet:'reportname1.cpt',paraname:'paravalue'},{reportlet:'reportname2.cpt',paraname:'paravalue'}]";
2. FR.doURLPDFPrint(printurl,true); //get方式传参
如果批量打印的模板过多的话,url就很长,而get方式对长度有限制,url过长时会导致打印失败。推荐批量打印的时候用post方式,reportlets参数打包在数据包中传输,不在url中显示,从而缩短url长度,另外安全性较好,如下:
1. var printurl="http://localhost:8075/WebReport/ReportServer";
2. var paravalue="[{reportlet:'reportname1.cpt',paraname:'paravalue'},{reportlet:'reportname2.cpt',paraname:'paravalue'}]";
3. FR.doURLPDFPrint(printurl,true,{data: {reportlets : paravalue}}); //post传参,reportlets参数不在url中显示
注:调用打印方法中的第二个参数为true表示弹出对话框,为false表示不弹出对话框即静默打印。具体可参考JS调用FineReport打印方法文档。
3. 示例
3.1 实现思路
首先通过JS获取复选框的值然后拼凑出正确的url,最后调用打印方法如PDF打印,通过post方法传参(FR.doURLPDFPrint(printurl,true,{data: {reportlets : paravalue}});)或get方法传参(FR.doURLPDFPrint(printurl,true);)进行批量打印。
3.2 post传参PDF打印代码如下
1. <html>
2. <head>
3. <title>FineReport Demo</title>
4. <script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
5. <link rel="stylesheet" type="text/css" href="/WebReport/ReportServer?op=emb&resource=finereport.css"/>
6. <script type="text/javascript">
7. function getreportlets(){ //获取报表URL
8. var tmpURL = '';
9. var reportlets='';
10. for (var i=0;i<document.report.cpt.length;i++ ){
11. if (document.report.cpt[i].checked) {
12. if (tmpURL) {
13. tmpURL += ',';
14. }
15. tmpURL += document.report.cpt[i].value;
16. }
17. }
18. if(tmpURL)
19. reportlets='['+tmpURL+']';
20. return reportlets;
21. }
22.
23. function doPrint(){ //通过sessionid打印
24. var printurl="/WebReport/ReportServer";
25. FR.doURLPDFPrint(printurl,true,{data: {reportlets : getreportlets()}}); //post传参,PDF打印,弹出对话框
26. //var printurl="/WebReport/ReportServer?reportlets="+getreportlets(); //get方式传参
27. //FR.doURLPDFPrint(printurl,true);
28. }
29. </script>
30. </head>
31. <body>
32. <form name="report" width="200" height="200">
33. <input id="cpt" type="checkbox" value="{reportlet:'/doc/Tutorial/Parameter/paratype3.cpt',classno:'Class1'}"/>
34. Class1
35. <br>
36. <input id="cpt" type="checkbox" value="{reportlet:'/doc/Tutorial/Parameter/paratype3.cpt',classno:'Class2'}"/>
37. Class2
38. <br>
39. <input type="button" onClick="doPrint();" value="doPrint">
40. <br>
41. </form>
42. <body>
43. </html>
代码可查看WebReport/page_demo/cusprint_batch.html,访问该页面,选中要打印的报表,就可进行批量打印了。
按纸张大小打印
1. 问题描述
我们模板嵌套到系统中项目时,页面样式固定好了,高度可能会比较小,这样就无法完全显示A4纸张大小的模板,就会把我们的模板设置成自定义分页,每页显示10条件数据,但是打印出来下面都是空的影响美观,所以希望打印能按正常页面打印。
2. 解决方案
做二张模板,一个模板展示10条数据的是嵌套在项目的显示页面下,另一个模板是点击打印按钮时触发这张模板进行打印,就可以实现完美打印了。
3. 实现步骤
3.1 去除报表模板内置工具栏
可以参考自定义浏览报表界面文档里去除内置工具栏小节
3.2 页面定义
由于工具栏按钮需要调用FineReport内部的方法,因此使用前需要加载对应的js文件,实际情况下,一个页面中可能不仅有报表部分,还会加载其他js文件,为避免引起不必要的js冲突,我们建议将报表内容显示在iframe中而不要显示在div中。代码如下:
1. <html>
2. <head>
3. <title>自定义浏览页面</title>
4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
5. <script type="text/javascript"
6. src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
7. <link rel="stylesheet" type="text/css"
8. href="/WebReport/ReportServer?op=emb&resource=finereport.css" />
9. <script type="text/javascript">
10. function doPrint(){
11. var url="/WebReport/ReportServer?reportlet=demo/basic/leiji.cpt";
12. FR.doURLFlashPrint(url);
13. }
14. </script>
15. </head>
16. <body onload="afterload()">
17. <div id="toolbar">
18. <button type="button"
19. onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">
20. 首页
21. </button>
22. <button type="button"
23. onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage()">
24. 上一页
25. </button>
26. <button type="button"
27. onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage()">
28. 下一页
29. </button>
30. <button type="button"
31. onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoLastPage()">
32. 末页
33. </button>
34. <button type="button" onclick=doPrint()>
35. 打印
36. </button>
37. </div>
38. <iframe id="reportFrame"
39. src="/WebReport/ReportServer?reportlet=/gettingstarted.cpt&__showtoolbar__=false"
40. width=100% height=80%></iframe>
41. </body>
42. </html>
解释说明: function doPrint(){ //当点击打印按钮时触发的是doprint方法 var url="/WebReport/ReportServer?reportlet=demo/basic/leiji.cpt"; //打印的模板 FR.doURLFlashPrint(url); //触发flash打印的方法 }
完整代码,可参考WebReport/page_demo/print.html文件夹下面的。
3.3 预览效果
联系客服