FineReportでJSを使用して、クリックして意思決定レポートをフルスクリーンで表示する機能を実現します。

声明：この記事の内容の大部分は「FineReport 9.0 ドキュメント」から取得されています。元の記事が失われることを防ぐために、個人的なバックアップとして保管しています。元の記事のリンク：https://help.finereport.com/finereport9.0/doc-view-2372.html#7

最近はプロジェクトの進捗がいっぱいで、ブログの更新がほとんどできません。会社が FineReport というツールを購入して、プロジェクトのダッシュボードを開発しています。私はずっとテンプレートデザイナーと取り組んでいます。昨日、要件が提出され、現在のシステムにダッシュボードを埋め込み、フルスクリーンの機能を追加する必要がありました。

ダッシュボードは決定レポートを使用して作成されているため、元々はレポート自体から始めて、フルスクリーンと終了フルスクリーンのボタンを追加する予定でした。しかし、この余分なボタンはレポート画面で非常に突出していて、他の方法を考えるしかありませんでした。ドキュメントを検索する中で、マウスクリックでレポート画面をフルスクリーンにする方法があり、私の要件に非常に合っているとわかりましたので、この方法を使用することにしました。

デザイナーで決定レポートを開き、右側のコンポーネント設定で「body」を選択し、「イベント - イベントの追加 - クリック」と選択します。以下の画像のようになります：

イベントの追加

その後、鉛筆のアイコンをクリックして、以下のコードをコピーします：

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ブラウザ  
        else if (docElm.mozRequestFullScreen) {  
            docElm.mozRequestFullScreen();  
        }  
        //Chromeなどのブラウザ  
        else if (docElm.webkitRequestFullScreen) {  
            docElm.webkitRequestFullScreen();  
        }  
    }  
} else { //FireFoxブラウザ  
    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ブラウザ  
        else if (docElm.mozRequestFullScreen) {  
            docElm.mozRequestFullScreen();  
        }  
        //Chromeなどのブラウザ  
        else if (docElm.webkitRequestFullScreen) {  
            docElm.webkitRequestFullScreen();  
        }  
    }  
}

対応する実装効果は次のようになります：

最終的な効果

後で、フルスクリーンにするだけでなく、誤って終了することを防ぐために、コードの観察を通じて、if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width)の部分をconsole.log("FullScreen")に変更しました。以下の部分が変更されました：

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ブラウザ  
    if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {  
        console.log("FullScreen")  
    }