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

プレビューでのレポートの表示位置、表示モードを設定できます。

表示位置
表示モード
サンプルコード

１．表示位置

プレビューでのレポートの表示位置（左、中央、右）を設定できます。

左（left）
中央（center）
右（right）

サンプルコード

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

２．表示モード

プレビューでの表示モード（レポート、Webページ）を設定できます。

レポート（standard）

通常のレポートとして表示します。
Webページ（noPaper）

レポートと背景が同色のため、Webページの一部のように表示できます。

サンプルコード

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

３．サンプルコード

コードの全体は、以下のようになります。

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>