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®ion=East China">
</iframe>
</body>
</html>
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®ion=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®ion=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®ion=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®ion=East China')+'&format=word')">Word</button>
<iframe id="reportFrame" width="100%" height="100%" name="reportFrame" </iframe>
</body>
</html>
Note: For any information about cross domain, please refer to Cross Domain JS Calls and JS Cross Domain Solution.
