Home > Back-end >  How [Javascript] in FineReport JS export custom button
How [Javascript] in FineReport JS export custom button

Time:09-19

FineReport supports a variety of different ways of export, direct use of FineReport built-in export button can be a very quick and convenient to the output of the various formats, but in the integration of the web page, we often want to embed the report content in the iframe, and toolbar and buttons on the toolbar will be hidden, and use a custom web page button, so, at this point, this kind of custom button how to realize the export?

As shown in the above, to create a new HTML page, define a toolbar and a iframe, pictured above defined in the toolbar button, iframe embedded in FineReport statements, the diagram below:

FineReport statements set
Open the designer, to find the one embedded in a web page template above, because want to use a custom button as a toolbar, then the built-in toolbar FineReport statements need not displayed, click the template & gt; Template web properties & gt; Paging preview set, remove the use the toolbar at the front of the check, the diagram below:

Custom export button
Nine custom Web page defines the export button, so how to achieve export operation?
FineReport JS interface for export operation:
Export PDF: exportReportToPDF ()
Export/Excel (paging) : exportReportToExcel (' page ')
Export (Excel) (as) : exportReportToExcel (' simple ')
Export/Excel (pagination sheet) : exportReportToExcel (' sheet ')
Export (paging export XLS format), Excel exportReportToExcel (' page_isExcel2003)
Export (Excel) (the same export XLS format) : exportReportToExcel (' page_isExcel2003)
Export (Excel) (pagination sheet export XLS format) : exportReportToExcel (' page_isExcel2003)
Export [images] : exportReportToImage (' GIF ') [inside the parentheses can change the parameters, such as PNG, JPG, and so on picture type]
Export [word] : exportReportToWord ()
Therefore, the application of each button click event called the JS interface to implement the corresponding export formats, such as export PDF, so the time for the button's onclick:
Onclick="document. The getElementById (' reportFrame). ContentWindow. The contentPane. ExportReportToPDF ()", "
Docment. GetElementById (' reportFrame) is to obtain the iframe framework, and then through contentWindow report window, and got the contentPane this report container, finally you can call the various export interface method from the container,
Several other button export events not explained, one
The complete code
According to the same method as above for several other button to add an export, complete code is as follows:
Copy the code


FineReport custom export & lt;/title> <br/><meta HTTP - equiv="content-type" Content="text/HTML. Charset=utf-8 "/& gt; <br/></head> <br/><body> <br/><Fieldset> <br/><Div id="toolbar" & gt; <br/><Button type="button" onclick="document. The getElementById (' reportFrame). ContentWindow. The contentPane. ExportReportToPDF ()" & gt; Export [PDF] </button> <br/><Button type="button" onclick="document. The getElementById (' reportFrame). ContentWindow. The contentPane. ExportReportToExcel (' page ')" & gt; Export/Excel (paging) & lt;/button> <br/><Button type="button" onclick="document. The getElementById (' reportFrame). ContentWindow. The contentPane. ExportReportToExcel (' simple ')" & gt; Export (Excel) (the same) & lt;/button> <br/><Button type="button" onclick="document. The getElementById (' reportFrame). ContentWindow. The contentPane. ExportReportToExcel (' sheet ')" & gt; Export (Excel) (pagination sheet) & lt;/button> <br/><Button type="button" onclick="document. The getElementById (' reportFrame). ContentWindow. The contentPane. ExportReportToExcel (' page_isExcel2003)" & gt; Export (Excel) (paging export XLS format) & lt;/button> <br/><Button type="button" onclick="document. The getElementById (' reportFrame). ContentWindow. The contentPane. ExportReportToExcel (' simple_isExcel2003)" & gt; Export (Excel) (the same export XLS format) & lt;/button> <br/><Button type="button" onclick="document. The getElementById (' reportFrame). ContentWindow. The contentPane. ExportReportToExcel (' sheet_isExcel2003)" & gt; Export (Excel) (pagination sheet export XLS format) & lt;/button> <br/><Button type="button" onclick="document. The getElementById (' reportFrame). ContentWindow. The contentPane. ExportReportToImage (' PNG ')" & gt; Export [images] </button> <br/><Button type="button" onclick="document. The getElementById (' reportFrame). ContentWindow. The contentPane. ExportReportToWord ()" & gt; Export [Word] </button> <br/></div> <br/></fieldset> <br/><iframe id="reportFrame" width="100%" height="100%" SRC="https://bbs.csdn.net/WebReport/ReportServer? Reportlet=doc/Primary/DetailReport/the CPT '& gt; </iframe> <br/></body> <br/></html> <br/><br/><br/>Effect to see <br/>Click on the different buttons, can see the results of its export: <br/> </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link:<a href="/Backend/12879.html" target="_blank" style="color:#999">https//www.codepudding.com/Backend/12879.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/Backend/12878.html'>How the code can't cycle</a></div> <div class="detail-arr-right">Next:<a href='/Backend/12880.html'>BitBtn add bitmap display problems</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags:  </li> <a href='/e/tags/?tagname=ActiveX%2FCOM%2FDCOM' target='_blank'>ActiveX/COM/DCOM</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links:  </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span>  <a href="https://www.codepudding.com/contact.html">Contact Us</a>      <a href="https://www.codepudding.com/service.html">Terms of Service</a>      <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023,Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>