Custom Export Button-FineReport Help Document

Last update：December 22, 2020

I. Overview

1. Requirement

When add a report to a web page, how to export the report using a custom button? Take the following steps:

Sample 1:

Sample 2:

2. Solution

If a report is embedded into a web page with iframe, you can call the export methods built in FineReport using JavaScript. If the template to be exported is not embedded in the web page, use window.open to access a URL with export parameters to export the report.

II. Steps

1. Sample 1

If a report is embedded in iframe, JS Custom Button Export on the HTML page can use the FR-built-in export functions to export the report, for example, Export as PDF, Export as Excel (Pagination), Export as Excel (Original), Export as Excel (with multiple pages and sheets), Export as Word and so on.

Input the following codes:

<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToPDF()">PDF</button>     
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page')">Excel(Full page)</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('simple')">Excel(Unaltered)</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('sheet')">Excel(Page to Sheet)</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToWord()">Word</button>

Input the following complete HTML codes:

<html>
  <head>  
  <title>FineReportExport</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(Full page)</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('simple')">Excel(Unaltered)</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('sheet')">Excel(Page to 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-EN/Primary/Parameter/Parameter_Reference.cpt&region=East China">
</iframe>    
  </body>  
</html>
Show Code

2. Sample 2

If the report is not embedded into iframe or the report exported is different from the one in preview, use window.open().

Modify the onclick event for the button by inputting the following codes:

<button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc-EN/Primary/Parameter/Parameter_Reference.cpt&region=East China')+'&format=excel')">Excel</button>

Input the following complete HTML codes:

<html>
  <head>  
  <title>FineReportExport</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-EN/Primary/Parameter/Parameter_Reference.cpt&region=East China')+'&format=excel')">Excel</button>

<button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc-EN/Primary/Parameter/Parameter_Reference.cpt&region=East China')+'&format=pdf')">PDF</button>
<button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc-EN/Primary/Parameter/Parameter_Reference.cpt&region=East China')+'&format=word')">Word</button>
<iframe id="reportFrame" width="100%" height="100%" name="reportFrame" </iframe>  
  </body>  
</html>