JS Full-screen Preview by Clicking Button

1.1 Problem description

The report preview in the decision-making platform can perform full-screen display, but if it is not previewed through the decision-making platform, how to preview a single report in full screen?

Note: This document introduces the method of full-screen display by clicking button in a general report. For the method of full-screen display by clicking button in a dashboard, please refer to the document Click Dashboard to Display in Full Screen.

1.2 Implementation ideas

Add a button click event to realize full screen preview.

Note: This method is only applicable to Google and Firefox browsers.

2.1 Design report

Open a built-in template in the designer: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStartedEN.cpt 

Add a button widget button0 in the Parameter Panel, and change the button name to full screen display, as shown below:

2.2 Add a event

Select the button widget, and click Add Event in widget Settings > Events to add a click event, as shown below:

The JavaScript code is as follows:

var docElm = document.documentElement;
//W3C proposal
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox browser
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome and other browsers
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}

2.3. Preview

Save the report, click Pagination Preview, and click the full screen button in the Parameter Panel to display the report in full screen. The effect is shown below:

Note: Mobile terminal is not supported.

Click Download Template:

click button to preview in full screen.cpt

https://help.fanruan.com/finereport/doc-view-1788.html