JS 实现选中内容批量打印/导出

  • 文档创建者:caixiaolan
  • 编辑次数:12次
  • 最近更新:Carly 于 2020-04-14
  • 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)复选按钮控件

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

    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

    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!