Web报表工具FineReport自定义打印方法汇总

hhulxm99 2011-07-20

展开全文

简述：

在使用报表软件进行打印的时候，对于打印的需求总是灵活多变的，文章主要介绍了Web报表工具FineReport自定义打印的几种方法。

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打印为例效果

若您需要在页面中某个位置添加一打印按钮，如以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. 示例

如需要打印出某个模板所有参数情况对应的结果，如下图，选择希望打印的参数值，点击doPrint按钮批量打印出对应的结果。

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 预览效果

预览http://localhost:8075/WebReport/page_demo/print.html，就可以预览到一个模板，点击打印是另外一个模板了。