Statement: The content implemented in this article is mostly taken from the "FineReport 9.0 Documentation" to personally retain a backup to prevent the original text from being lost. Original link: https://help.finereport.com/finereport9.0/doc-view-2372.html#7
Recently, due to the busy schedule of the project, I have rarely updated the blog. Since the company has purchased FineReport from Fanruan to develop the project's large screen, I have been dealing with its template designer. Yesterday, I was given a requirement to embed the large screen interface into the current system and add a full-screen function.
Because the large screen interface is created using decision reports, I originally planned to start from the report itself and add a button for full-screen and exit full-screen. However, this additional button was too conspicuous in the report interface, so I had to consider other ways. In the process of searching the documentation, I found a solution that achieves full-screen and exit full-screen by clicking on the report interface, which perfectly meets my requirements. So I used this method.
Open the decision report in the designer, select 'body' in the component settings on the right side, and then select "Events-Add Event-Click", as shown in the figure below:
Then click on the pencil icon and copy the following code:
var docElm = document.documentElement;
var explorer = window.navigator.userAgent.toLowerCase();
if (explorer.indexOf('chrome') > 0) { //webkit
if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
} else {
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox browser
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome and other browsers
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}
} else { //fireFox browser
if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
} else {
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox browser
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome and other browsers
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}
}
The corresponding implementation effect is as follows:
Later, it was said that only clicking on full-screen is needed, and clicking on exit full-screen should be avoided to prevent accidental triggering. After observing the code, I changed the part of exiting full-screen in if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) to console.log("FullScreen"), which solved the problem perfectly. The modified part is as follows:
var docElm = document.documentElement;
var explorer = window.navigator.userAgent.toLowerCase();
if (explorer.indexOf('chrome') > 0) { //webkit
if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
console.log("FullScreen")
} else { //fireFox browser
if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
console.log("FullScreen")
}