历史版本10 :JS 实现选中内容批量打印/导出 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 预期效果

在进行批量导出或打印时,勾选部分行并传递内容给新的模板,进行打印或导出,不同行传递的模板不一样。如下图所示:

1584673023570701.gif

1.2 实现思路

通过 JavaScript 代码传递参数,进行指定模板批量打印和导出。

2. 示例编辑

2.1 子报表

2.1.1 新建 test10001.cpt

新建普通模板,存储为:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\PrintReport\test10001.cpt

模板样式如下图所示:

1584670483583552.png

2.1.2 新建 test10002.cpt

新建普通模板,存储为:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\PrintReport\test10002.cpt

模板样式如下图所示:

1584670508942414.png

2.2 主报表

新建普通模板,存储为:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\PrintReport\PrintExample.cpt

2.2.1 数据准备

新建普通报表,新建数据集 ds1,数据库查询语句为:SELECT * FROM 订单 where 1=1 ${if(len(p1) == 0,"","and 订单ID in ('" + p1 + "')")} limit 10

如下图所示:

1584670722492654.png

2.2.2 设计报表

报表样式如下图所示:

1584671165173993.png

2.2.3 控件设置

1)按钮控件

设置 C1、C2 单元格为按钮控件,C1 单元格的按钮名称为批量打印,C2 单元格的按钮名称为批量导出。如下图所示:

1584671362605442.png

2)复选按钮控件

选中 B4 单元格,点击控件,设置为复选按钮控件,如下图所示:

1584671616233131.png

选中 B4 单元格,点击单元格属性>扩展,设置扩展方向为不扩展,左父格自定义为 C3 单元格。如下图所示:

1584671633603693.png

2.2.4 设置参数面板

编辑参数面板,新增一个标签控件、下拉框控件和查询控件。设置标签控件的控件值为 p1:

设置下拉框控件的控件名称为 p1。设置数据字典,类型设置为数据查询,实际值和显示值都是订单ID,如下图所示:

1584672183680124.png

2.3 设置批量打印 JS 事件

选中 C1 单元格,点击控件>事件,添加点击事件,输入 JavaScript 代码,如下图所示:

1584672496557575.png

批量打印的 JavaScript 代码如下:

var printurl="http://localhost:8075/webroot/decision/view/report";
var names = [];
var paths = [];
var singlepaths = [];    
var url = "ReportServer?reportlets=(";
var $span = $('.fr-checkbox-checkon');  //获取选中的复选框  
var $tds = $("td").has($span);     //定义选中复选框的单元格   
var $trs = $("tr").has($tds);   
var p=[]; 
for(var i=0; i<$trs.length;i++){   
    var name = $("td:eq(2)",$($trs[i])).html();  //获取选中的C4单元格的值  
    var a =  $("td:eq(3)",$($trs[i])).html();
    var b = $("td:eq(4)",$($trs[i])).html();    //
    names.push(name);     //将选中的值放到数组中 
    var cptpath ="doc/Advanced/PrintReport/"+"test"+ name+".cpt";
    var urlstring = "{reportlet:" +"'"+FR.cjkEncode(cptpath)+"'"+",p1:"+"'"+name+"'"+",p2:"+"'"+a+"'"+",p3:"+"'"+b+"'"+"}"; 
    debugger;
    paths.push(urlstring);      
    debugger;
}  
if(paths.length>0){
var rpaths=paths.join(","); 
var reportlets="["+rpaths+"]";  
var config = {
url : printurl,                    
isPopUp : false,                  
data : {reportlets:reportlets}            
};    
}          
debugger; 
FR.doURLPDFPrint(config);

2.4 设置批量导出 JS 事件

选中 C2 单元格,点击控件>事件,添加点击事件,输入 JavaScript 代码,如下图所示:

1584672679317712.png

批量导出的 JavaScript 代码如下:

var paths = [];
var url = "report?reportlets=[";
var $span = $('.fr-checkbox-checkon'); //获取选中的复选框  
var $tds = $("td").has($span); //定义选中复选框的单元格   
var $trs = $("tr").has($tds);
for (var i = 0; i < $trs.length; i++) {
var name = $("td:eq(2)", $($trs[i])).html(); //获取选中的C3单元格的值 
var a = $("td:eq(3)", $($trs[i])).html();
var b = $("td:eq(4)", $($trs[i])).html();
var cptpath = "doc/Advanced/PrintReport/" + "test" + name + ".cpt";
var urlstring = "{reportlet:" + "'" + FR.cjkEncode(cptpath) + "'" + ",p1:" + "'" + name + "'" + ",p2:" + "'" + a + "'" + ",p3:" + "'" + b + "'" + "}";
paths.push(urlstring);
}
url = url + paths + "]&format=word&__filename__=Xname";
window.open(encodeURI(url));

2.5 效果预览

保存模板,点击填报预览,即可对选中行的数据根据不同模板打印或导出。效果如 1.1 预期效果所示。

注:移动端不支持各种打印和导出方式。

3. 模板下载编辑

已完成模板请参见:

%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\PrintReport\PrintExample.cpt

%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\PrintReport\test10001.cpt

%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\PrintReport\test10002.cpt

点击下载模板:

PrintExample.cpt

test10001.cpt

test10002.cpt