资讯专栏INFORMATION COLUMN

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

wujl596 / 1111人阅读

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:exportReportToExcel("sheet")

导出Excel:exportReportToExcel("page_isExcel2003")

导出Excel:exportReportToExcel("page_isExcel2003")

导出Excel: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这个报表容器,最后就可以从容器中调用各种导出接口的方法了。

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

完整代码

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


    
  FineReport自定义导出  
    
    
  
 
    

效果查看

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88142.html

相关文章

  • Web报表工具FineReportJS API开发(二)

    摘要:如果报表嵌在网页的中,在外获取对象如下常用方法方法说明获取指定单元格中的控件获取指定名字的控件获取指定名称的扩展控件,返回一个数组表单预览或参数界面,都有一个对象。 上次介绍FineReport的JS API中的第一类开发--FR,这次就来介绍一下FS和contentWindow类的开发。1 FSFS是数据决策系统中的js接口,比如说FS.tabPane.addItem,先介绍几类操作...

    freewolf 评论0 收藏0
  • FineReport如何安装移动端H5插件

    摘要:移动端报表使用方法安装好插件后,在浏览器中调用时,需要在报表路径后面加上参数。另外移动端的插件,图表是只支持显示新图表。 HTML5报表插件安装及使用编辑 插件安装插件网址以及设计器插件安装方法和服务器安装插件的方法可以官网上面搜索,这里就不做详细介绍了。 移动端HTML5报表使用方法安装好插件后,在浏览器中调用时,需要在报表路径后面加上参数op=h5。但是PC端不完全支持H5效果。移...

    bovenson 评论0 收藏0
  • FineReport连接多维数据库示例及操作

    摘要:描述连接多维数据库,首先要通过数据连接将多维数据库与连接起来,然后在数据连接的基础上新建多维数据库数据集,用于模板设计。详细设置查看连接数据连接建立好之后,就可以添加多维数据库数据集。 1. 描述FineReport连接多维数据库,首先要通过数据连接将多维数据库与FineReport连接起来,然后在数据连接的基础上新建多维数据库XMLA数据集,用于模板设计。2.XMLA数据连接2.1描...

    YFan 评论0 收藏0

发表评论

0条评论

wujl596

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<