自定义导出按钮

  • 文档创建者:文档助手1
  • 编辑次数:18次
  • 最近更新:Leo.Tsai 于 2020-03-26
  • 1. 概述

    1.1 问题描述

    使用报表集成后,如何使用自定义按钮导出报表呢?如下所示:

    示例一:

    image.png

    示例二:

    image.png

    1.2  实现思路

    如果报表采用 iframe 的方式集成在页面中,可以利用 JS 直接调用 FR 内部的导出方法,如果需要导出的模板不在页面中,可以利用 window.open 来打开带导出参数 URL 的方式来实现报表导出。

    2. 操作步骤

    2.1. 示例一

    如果是报表嵌在 iframe 中,JS 自定义按钮导出 在 HTML 页面可直接调用FR内部的导出方法,如导出 PDF、导出 Excel(分页)、导出 Excel(原样)、导出 Excel(分页分 sheet)、导出 Word 等

    需要添加的代码如下所示:

    <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.exportReportToWord()">导出[Word]</button>

    完整代码如下:

    <html>
      <head>  
      <title>FineReport自定义导出</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
      <script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script> 
      </head>  
      <body>
    <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.exportReportToWord()">导出[Word]</button>
    <iframe id="reportFrame" width="100%" height="100%" name="reportFrame" src="/webroot/decision/view/report?viewlet=doc/Primary/Parameter/parameter.cpt&地区=华东">
    </iframe>    
      </body>  
    </html>

    2.2. 示例二

    还有一种情况视报表没有嵌入在 iframe 中或者导出的报表与预览的报表不同,这时可以采用 window.open() 方法。

    这时可以将上述的 button 的 onclick 事件修改,代码为:

    <button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc/Primary/Parameter/parameter.cpt&地区=华东')+'&format=excel')">导出[Excel]</button>

    完整代码如下所示:


    <html>
      <head>  
      <title>FineReport自定义导出</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
      <script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script> 
      </head>  
      <body>
    <button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc/Primary/Parameter/parameter.cpt&地区=华东')+'&format=excel')">导出[Excel]</button>
    <button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc/Primary/Parameter/parameter.cpt&地区=华东')+'&format=pdf')">导出[pdf]</button>
    <button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc/Primary/Parameter/parameter.cpt&地区=华东')+'&format=word')">导出[word]</button>
    <iframe id="reportFrame" width="100%" height="100%" name="reportFrame" </iframe>  
      </body>  
    </html>

    注:用户若想了解跨域相关的问题,请参考 跨域调用 JS 和 JS 跨域解决方案

    2.3 效果预览

    2.3.1 示例一

    已完成示例请参照:%FR_HOME%/webroot/page_demo/cusexport2.html,可以直接用设计器安装目录下的该 demo 进行演示。

    启动设计器,输入http://localhost:8075/webroot/help/page_demo/cusexport2.html,效果如下图所示:

    image.png

    2.3.1 示例二

    已完成示例请参照:%FR_HOME%/webroot/page_demo/cusexport1.html,可以直接用设计器安装目录下的该 demo 进行演示。

    启动设计器,输入http://localhost:8075/webroot/help/page_demo/cusexport1.html,效果如下图所示:

    image.png

    3. 资源下载

    点击下载上述的示例文件:cusexport.zip


    附件列表


    主题: 部署集成
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!