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

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

１．表示位置

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

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

サンプルコード

pageView: {
    horizontalAlignment: "left", // left, center, right
    viewMode: "standard"
}

２．表示モード

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

レポート（standard）

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

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

サンプルコード

pageView: {
    horizontalAlignment: "center",
    viewMode: "standard" // standard, noPaper
}

３．サンプルコード

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

<!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>