How to customize button export in JS in FineReport

FineReport supports a variety of different export methods. Using the built-in export button in FineReport can be very fast and convenient to output in various formats. However, when we integrate web pages, we often only want to embed the report content into the iframe, and The toolbar and the buttons on the toolbar will be hidden, and the buttons customized on the web page will be used. So, at this time, how to export such customized buttons?

As shown in the figure above, create a new html page, define a toolbar and an iframe, define the button shown in the above figure in the toolbar, and embed the report in FineReport in the iframe, as shown below:

FineReport report settings

Open the designer and find the template embedded in the web page above. Since the custom button is used as the toolbar, the toolbar built into the FineReport report does not need to be displayed. Click Template > Template Web Properties > Paging Preview Settings, remove the check in front of the Use Toolbar, as shown below:

Custom export button

There are 9 custom export buttons defined in the web page, so how can the export operation be realized?

The JS interface of FineReport export operation is:

Export PDF : exportReportToPDF()

Export [Excel] (page break) : exportReportToExcel('page')

Export [Excel] (as is) : exportReportToExcel('simple')

Export [Excel] (page by sheet) : exportReportToExcel('sheet')

Export [Excel] (paged export xls format) : exportReportToExcel('page_isExcel2003')

Export [Excel] (export xls format as it is) : exportReportToExcel('page_isExcel2003')

Export [Excel] (paging and sheet exporting xls format) : exportReportToExcel('page_isExcel2003')

Export [image] : exportReportToImage('gif') [parameters can be replaced in brackets, such as png, jpg, etc. image types]

export [word] : exportReportToWord()

Therefore, the click event application of each button calls the above JS interface to realize its corresponding export format, such as exporting PDF, then the onclick time of the button is:

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

docment.getElementById('reportFrame') is to get the iframe frame, then get the report window through contentWindow, and get the report container of contentPane, and finally you can call various export interface methods from the container.

The export events of several other buttons are not explained here.

full code

Add export events for several other buttons according to the same method as above. The complete code is as follows:

<html>
  <head>  
  <title>FineReport Custom Export</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>

效果查看

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

How to customize button export in JS in FineReport

Guess you like