I. Overview
1) Enterprises often use FineReport to create reports and then display the report content in the web pages of their OA systems, so as to minimize the cost of web development.
2) Reports created by FineReport can be accessed by URLs (the prerequisite is that the report project is deployed), so you can display the report content in a web page via iframe.
3) This article uses an simple example to introduce the steps to integrate a report in a web page.
II. Steps
1. Preview the report under the remote design mode
1) You can see the URL to access this report in the browser. As shown in the picture below, the format of the URL is:
server ip: port/webroot/decision/view/form?viewlet=the path of the report relative to folder named reportlets
2) If the report project can be accessed by a custom domain name, you can change server ip: port to the domain name. For instance:
2. Allow the report to be accessed by the public
If you hope the report to be accessed by people other than the enterprise, it requires the administrator to login the decision-making platform and close the requirement of user authentication on this report. As a result, all people can view the report via URL without authentication.
3. Display the report content in the web page
1) Create an iframe element and pass the URL to its src attribute.
2) Please refer to the HTML below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smart City Dashboard</title>
<style>
.nav_content{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background: linear-gradient(-45deg,#005dec,#002d72);
}
.nav_content h1{
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<section class="nav">
<div class="nav_content">
<h1> Smart City </h1>
</div></section><section>
<iframe src="<a style="background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: center;
background-repeat: repeat;
background-size: auto;
border-bottom-color: currentColor;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: currentColor;
border-left-style: none;
border-left-width: 0px;
border-right-color: currentColor;
border-right-style: none;
border-right-width: 0px;
border-top-color: currentColor;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
bottom: auto;
box-sizing: content-box;
color: rgb(0, 51, 102);
float: none;
font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
font-size: 14px;
font-style: normal;
font-weight: normal;
height: auto;
left: auto;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: inherit;
outline-color: invert;
outline-style: none;
outline-width: 0px;
overflow: visible;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
right: auto;
text-align: left;
text-decoration: none;
top: auto;
vertical-align: baseline;
width: auto;
" href="https://endemo.finereport.com/webroot/decision/view/form?viewlet=demo%252FDashboard%252FSmart%2BCity.frm" "="">https://endemo.finereport.com/webroot/decision/view/form?viewlet=demo%252FDashboard%252FSmart%2BCity.frm" frameborder="0" style="width: 100%;
height: 800px;">
</iframe>
</section>
</body>
</html>
Note
In the steps introduced above, iframe uses GET method to request the report URL (i.e. just specify the URL in the src attribute), but this method will expose the report path. In addition, some reports require parameters, so as to display different content according to current user. To improve security, you can
construct a form element in the web page with some widget elements inside,
pass the iframe name to the form's target attribute, pass the report URL to the form's action attribute, pass the parameter names and parameter values to the widget elements' name and value attributes, and
utilize the submit event of the form element to request the report URL and pass the parameters by POST method.
The result of the request will be displayed in the form's target, i.e. the iframe.
The web page and the report project should uses the same communication protocol, i.e. uses HTTP or HTTPS at the same time.
4. View the effect
You can click the link to view the effect: https://www.finereport.com/en/smart_city_dash.
III. Additional instructions
1. Use iframe rather than div
FineReport provides a JavaScript API, and a file named finereport.js will be loaded when call the API. finereport.js utilizes jQuery v1.9.1, but chances are that the web page loads other versions of jQuery. To avoid conflicts between the versions, you are recommended to use iframe rather than div element to display the report content.
When you need to invoke methods in the JavaScript API, you can firstly access the report via iframe and then uses these methods. Methods are introduced in Secondary Development by Javascript.
2. Encounter error messages due to cross-domain request
If the web page and the report project are deployed on different servers or they use different ports of the same server, the situation is that the web page sends a cross-domain request to the report. Under this circumstance, you may fail to view the report (e.g. see some error messages). To Solve this problem, the administrator should login the decision-making platform and close [Security Headers] > [Click Attach Protection].
Previous：Notice After the Upgrade
