最新历史版本 :JS实现预定义导出按钮 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 问题描述

JS实现自定义导出文件名称 中,可以在模板「参数面板」中自定义导出按钮,利用 JS 实现自定义导出文件名。当很多模板都要实现这个功能时,每个模板都写一遍 JS,比较麻烦。所以可以预定义一个导出按钮,需要时就可以直接拖拽添加。如下图所示:

image.png

1.2 实现思路

通过「控件管理」自定义一个导出按钮,按钮添加 JS 事件,实现导出功能。

2. 示例编辑

2.1 预定义按钮

1)设计器菜单栏打开服务器>控件管理。如下图所示:

11.png

2)新建一个控件,并设置属性。如下图所示:

①点击加号新建一个控件

②双击修改名称为导出

③选择控件类型为按钮控件

④控件名为export

⑤按钮类型为普通,按钮名字为导出

Snag_14952b0b.png

3)点击事件,添加参数与 JS 代码,然后点击右下角确定。如下图所示:

Snag_14993596.png

参数如下:

servletURL:公式servletURL

reportName:公式reportName

exportName:公式indexofarray(split(indexofarray(REVERSEARRAY(split(reportName,"/")),1),".c"),1)+"_"+format(now(),"yyyyMMddHHmm"),此处自定义文件名。

JavaScript 代码如下:

注:此代码实现的默认导出文件名称为:模板名字_导出时间(具体到分钟)。

//定义报表URL,通过内置参数 servletURL、reportName 获取对应模板的路径和名称
var url=servletURL+"?viewlet="+reportName;
//遍历参数面板控件,获取对应的参数值。
$.each(this.options.form.name_widgets,function(i,item) {
      if(item.options.type!== 'label'&&item.getName()!="PARA"&&item.getName()!="SEARCH"&&item.getName()!="EXPORT") {
      url+="&"+item.getName()+"="+item.getValue();
    }
});
//在URL上加上打印参数
url+="&format=excel&extype=simple&__filename__="+exportName;
window.location=encodeURI(encodeURI(url));//转码导出

2.2 使用按钮

打开一个模板,如内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStarted

1)在参数面板工具栏,点击小三角符就可以看到自定义的导出按钮,按住可以拖动到参数面板使用。如下图所示:

image.png

2)保存模板,点击「分页预览」,查询出报表内容后点击「导出」按钮即可导出Excel,效果如下图所示:

1595318613270122.gif

注:不支持移动端。

3. 模板下载编辑

已完成模板可参见:

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\JS实现预定义导出按钮.cpt

点击下载模板:JS实现预定义导出按钮.cpt