ページビューのカスタマイズ

JSビューワでレポートをプレビューする時にレポートの水平方向の配置を設定したり、JSViewerのAPIを使用してレポートをページまたはWebページ要素として表示するように設定できます。

水平方向の配置

ビューワに対するレポートの水平方向の配置は、「左揃え」、「中央揃え」または「右揃え」に設定できます。次の画像は、左揃えのレポートページを示します。

Customize Report Page Alignment

上記のプレビューを実現するためのコードは、次のとおりです。

index.html	コードのコピー
pageView: { horizontalAlignment: "left", viewMode: "standard" }

表示モード

standardモード

表示モードを「standard」に設定する場合、レポートはページとして表示されます。

Change the View Mode for the Report Page

上記のプレビューを実現するためのコードは、次のとおりです。

index.html	コードのコピー
pageView: { horizontalAlignment: "center", viewMode: "standard" }

noPaperモード

表示モードを「noPaper」に設定する場合、レポートはWebページの要素として表示されます。このモードでは、ビューワの背景色を透明に設定しています。

Change the View Mode to 'noPaper'

上記のプレビューを実現するためのコードは、次のとおりです。

index.html	コードのコピー
pageView: { horizontalAlignment: "center", viewMode: "noPaper" }

完全なコード

以下は、JSビューワでページビューをカスタマイズするための完全なコードを示します。

index.html	コードのコピー
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <title>JS Viewer</title> <link href="jsViewer.min.css" rel="stylesheet"> <link href="index.css" rel="stylesheet"> </head> <body onload="loadViewer()"> <div style="width: 100%"> <div id="viewerContainer"></div> </div> <script type="text/javascript" src="jsViewer.min.js"></script> <script type="text/javascript"> let viewer; function loadViewer() { viewer = GrapeCity.ActiveReports.JSViewer.create({ element: '#viewerContainer', displayMode: "Continuous", pageView: { horizontalAlignment: "center", viewMode: "standard" } }); console.dir(viewer) viewer.openReport("DemoReport.rdlx"); } </script> </body> </html>

index.html

コードのコピー

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>JS Viewer</title>
    <link href="jsViewer.min.css" rel="stylesheet">            
    <link href="index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
    <div style="width: 100%">
        <div id="viewerContainer"></div>
    </div>
    <script type="text/javascript" src="jsViewer.min.js"></script>
    <script type="text/javascript">
        let viewer;
        function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                displayMode: "Continuous",
                pageView: {
                    horizontalAlignment: "center",
                    viewMode: "standard"
                }                        
            });
           
            console.dir(viewer)
            viewer.openReport("DemoReport.rdlx");
        }
    </script>
</body>
</html>