`

FineReport中JS如何自定义按钮导出

阅读更多

FineReport支持多种不同的导出方式,直接使用FineReport内置导出按钮可以非常快捷方便的来对各种格式的输出,但是我们在web页面集成中的时候,往往只想将报表内容嵌入到iframe中,而工具栏以及工具栏上的按钮都会隐藏掉,而使用web页面自定义的按钮,那么,此时,这种自定义按钮如何实现导出呢?

 

如上图所示,新建一个html页面,定义一个工具栏和一个iframe,工具栏中定义上图所示的按钮,iframe中嵌入FineReport中的报表,如下图:

 

FineReport报表设置

打开设计器,找到上面web页面中嵌入的那张模板,由于要使用自定义按钮作为工具栏,那么FineReport报表内置的工具栏就无需显示出来。点击模板>模板web属性>分页预览设置,去掉使用工具栏前面的勾选,如下图:

 

自定义导出按钮

Web页面中定义了9个自定义导出按钮,那么怎样才能实现导出操作呢?

FineReport导出操作的JS接口为:

导出PDF:exportReportToPDF()

导出[Excel](分页):exportReportToExcel('page')

导出[Excel](原样):exportReportToExcel('simple')

导出[Excel](分页分sheet):exportReportToExcel('sheet')

导出[Excel](分页导出xls格式):exportReportToExcel('page_isExcel2003')

导出[Excel](原样导出xls格式):exportReportToExcel('page_isExcel2003')

导出[Excel](分页分sheet导出xls格式):exportReportToExcel('page_isExcel2003')

导出[图片]:exportReportToImage('gif')【括号里面可以更换参数,比如说png,jpg等等图片类型】

导出[word]:exportReportToWord()

故,各个按钮的点击事件应用调用上述的JS接口来实现其对应的导出格式,比如说导出PDF,那么其按钮的onclick时间为:

 onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToPDF()"

docment.getElementById('reportFrame')是获取到iframe框架,然后通过contentWindow得到报表窗口,并拿到contentPane这个报表容器,最后就可以从容器中调用各种导出接口的方法了。

其他的几个按钮的导出事件这里就不一一讲解了。

完整代码

根据上述同样的方法为其他几个按钮添加导出事件,完整代码如下:

<html>
  <head>  
  <title>FineReport自定义导出</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  </head>  
  <body>
 
	<fieldset>
    <div id="toolbar">       
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToPDF()">导出[PDF]</button>  
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page')">导出[Excel](分页)</button>       
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('simple')">导出[Excel](原样)</button>       
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('sheet')">导出[Excel](分页分sheet)</button>
	<button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page_isExcel2003')">导出[Excel](分页导出xls格式)</button>      
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('simple_isExcel2003')">导出[Excel](原样导出xls格式)</button>       
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('sheet_isExcel2003')">导出[Excel](分页分sheet导出xls格式)</button> 
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToImage('png')">导出[图片]</button>  
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToWord()">导出[Word]</button>              
    </div>  
	</fieldset>
    <iframe id="reportFrame" width="100%" height="100%" src='/WebReport/ReportServer?reportlet=doc/Primary/DetailReport/Details.cpt' ></iframe>  
  </body>  
</html>

 

效果查看

点击不同的按钮,即可看到其导出的结果:

 

0
0
分享到:
评论

相关推荐

    报表开发工具FineReport中js自定义按钮导出.pdf

    报表开发工具FineReport中js自定义按钮导出.pdf FineReport是一款 Reporting 和 Business Intelligence 工具,提供了多种导出方式,包括 PDF、Excel、Word、图片等格式。 FineReport 提供了内置的导出按钮,可以...

    FineReport报表工具自定义控件CSS概述

    FineReport的自定义控件功能允许开发者创建和使用自己的控件,这些控件可以是简单的输入框、按钮,也可以是复杂的图表或者数据选择器。通过自定义控件,我们可以扩展FineReport的功能,满足特定业务需求。而CSS的...

    FineReport中如何用JavaScript自定义地图标签

    JavaScript中的关键变量`this.points`代表了地图上所有区域对象的集合,每个对象对应一个区域的数据点,其中包含了系列名称、值、颜色等属性。通过操作`this.points`,可以针对不同的区域进行自定义显示。例如,在...

    如何开发FineReport的自定义控件?

    在JavaScript中,我们定义了新的控件类型,并通过一个快捷方式将其与Java后端代码关联起来。这部分通常涉及到使用JavaScript扩展FineReport的基础控件类,并通过快捷方式调用,实现从后端到前端的配置传递。在示例中...

    Finereport数据集参数实现动态列报表模板 + 函数JS代码

    在这个“Finereport数据集参数实现动态列报表模板 + 函数JS代码”的资源包中,我们将深入探讨如何利用FineReport的特性来实现动态列报表,并结合JavaScript(JS)代码来优化这一过程。 首先,动态列报表的核心在于...

    解析如何开发FineReport的自定义控件

    在JavaScript中,我们需要继承FineReport的前端控件编辑器,例如`FR.ComboBoxEditor`,创建一个新的编辑器类`FR.CustomComboBoxEditor`,并覆盖或扩展所需的方法。 ```javascript (function($) { FR....

    Java报表工具FineReport导出EXCEL的四种API

    在FineReport中,可以通过LargeDataPageExcelExporter类来实现大数据量的导出,并且也可以导出为Excel2007格式。示例代码如下: ```java largeOutputStream = new FileOutputStream(new File("E:\\LargeExcelExport....

    FineReport报表软件API源代码之程序数据集、自定义函数和导出API.docx

    FineReport报表软件API源代码之程序数据集、自定义函数和导出API FineReport报表软件API源代码提供了三个主要的知识点:程序数据集、自定义函数和导出API。下面我们将详细介绍每个知识点。 程序数据集 程序数据集...

    FineReport报表工具内置JS的使用

    #### JavaScript在FineReport中的角色 JavaScript,作为一种轻量级、解释型的脚本语言,以其强大的交互性和灵活性,在网页开发中扮演着核心角色。尤其在FineReport报表工具中,JavaScript的应用使得报表的设计与...

    关于报表工具FineReport的自定义函数的应用

    很多报表工具都自带大量的函数,在正常情况下足够满足用户的报表制作需求,但是在一些特殊领域,可能需要一些特殊的函数,在这种情况下,报表工具FineReport提供了自定义函数机制,可以由用户根据业务需要自己来定义...

    FineReport7.0版,自定义css

    FineReport自定义css,只适用7.0系列版本。。。。。。

    报表工具FineReport参数控件和报表内容自动居中设置方法

    以下详细讨论了如何在FineReport中设置参数控件以及报表内容的自动居中。 首先,针对参数控件(尤其是多行控件)的居中问题,FineReport提供了两种主要的解决方案。对于7.1.1版本的用户,可以通过拖动界面控件来...

    如何给FineReport设置自定义消息提醒工具

    FineReport设计器有自动的消息推送功能,可设置报表定时推送和常规的日报周报推送。官方有自己的消息推送的接口,不过有些用户旺旺希望自己开发,符合自己需求的推送界面。 下面这个方案就从逻辑层面简单阐述一个...

    java报表API源代码(程序数据集、自定义函数和导出API)

    Java报表API源代码主要涵盖了FineReport工具的程序数据集、自定义函数和导出API的实现,旨在帮助开发者深入了解报表工具的内部工作原理,掌握二次开发技能,以应对各种个性化的业务需求。FineReport是一款强大的Java...

    FineReport中如何用JavaScript解决控件值刷新不及时的问题

    在JavaScript中,可以使用FineReport提供的API接口来实现这一需求。具体来说,可以通过编写一段JavaScript代码,使得在用户完成数据输入后,不必进行额外的操作即可立即读取到最新的值。 通常情况下,当在...

    报表工具FineReport使用教程之自动计算日期.docx

    FineReport是一款功能强大且国际通用的报表软件,广泛应用于企业的报表制作中。在日常工作中,我们经常需要制作以各种数据报表,来分析公司的经营业务的情况。今天,我们将为大家介绍FineReport软件的一些日常操作...

    FineReport中自定义登录界面的方法

    同时,为了与已有系统整合,可以在已有系统的登录页面如login.jsp中引入finereport.js文件,然后在JavaScript中定义提交用户名和密码的函数,通过iframe或ajax方式调用报表服务的验证接口。在FineReport平台系统中...

Global site tag (gtag.js) - Google Analytics