自定义按钮导出

  • 文档创建者:印然
  • 编辑次数:36次
  • 最近更新:Carly 于 2020-04-14
  • 1. 概述

    1.1 应用场景

    虽然 FineReport 支持多种不同的导出方式,但是在 Web 页面集成 中,用户往往只想将报表内容嵌入到 iframe 中,而工具栏以及工具栏上的按钮都会隐藏掉。

    1.2 功能简介

    用户可以通过 Web 页面自定义按钮实现导出。如下图所示:

    1584338090432049.png

    2. 导出接口

    2.1 JavaScript 接口

    FineReport 导出操作的 JS 接口有以下几种:

    导出格式接口
    PDFexportReportToPDF()
    Excel分页导出 xlsx 格式exportReportToExcel('page')
    原样导出 xlsx 格式exportReportToExcel('simple')
    分页分 Sheet 导出 xlsx格式exportReportToExcel('sheet')
    分页导出 xls 格式exportReportToExcel('page_isExcel2003')
    原样导出 xls 格式exportReportToExcel('simple_isExcel2003')
    分页分 Sheet 导出 xls 格式exportReportToExcel('sheet_isExcel2003')
    WordexportReportToWord()
    图片PNG
    exportReportToImage('png')
    JPGexportReportToImage('jpg')
    GIFexportReportToImage('gif')

    注:JAR 包时间在 2016-10-10 日之前,导出的 Excel 格式默认为 xls 。

    2.2 使用方法

    各个按钮的点击事件应该调用上述的 JavaScript 接口来实现其对应的导出格式。

    例如导出 PDF 格式,那么导出按钮的 onclick 事件为:

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

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

    3. 示例

    3.1 自定义导出按钮

    1)新建 export.html,内容如下:

    点击下载文件:export.html

    <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='/webroot/decision/view/report?viewlet=doc/Primary/DetailReport/Details.cpt' ></iframe>  
      </body>  
    </html>

    2)将 export.html 放置到 %FR_HOME%\webapps\webroot\help\page_demo 路径下,如下图所示:

    1584339371253630.png

    3.2 关闭点击劫持攻击防护

    打开数据决策平台,点击管理系统>安全管理>安全防护>Security Headers>高级设置,关闭点击劫持攻击防护按钮。如下图所示:

    1584339490803643.png

    3.3 效果预览

    打开服务器,在浏览器端输入http://localhost:8075/webroot/help/page_demo/export.html,即可看到  Web 页面集成报表。

    点击页面上自定义的导出按钮,即可导出对应格式的文件。如下图所示:

    1584339779662439.png

    附件列表


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