Customize Page View

In This Topic

You can set the horizontal alignment of the report on previewing a report on JS Viewer, and also set the report to appear as a page or a web page element using the Js Viewer API.

Horizontal Alignment

The horizontal alignment of the report page relative to the viewer frame can be set to center, left, or right. The following image shows the report page aligned to left.

Customize Report Page Alignment

The code to obtain the above preview is as shown below.

index.html	Copy Code
pageView: { horizontalAlignment: "left", viewMode: "standard" }

View Modes

View Mode as 'standard'

The report is displayed as a page.

Change the View Mode for the Report Page

The code to obtain the above preview is as shown below.

index.html	Copy Code
pageView: { horizontalAlignment: "center", viewMode: "standard" }

View Mode as 'noPaper'

The report is displayed as an element of a web page. In this mode, the viewer's background color is set to transparent.

Change the View Mode to 'noPaper'

The code to obtain the above preview is as shown below.

index.html	Copy Code
pageView: { horizontalAlignment: "center", viewMode: "noPaper" }

Complete Code Implementation

The following code snippet shows the complete code for customizing the page view in JS Viewer.

index.html	Copy Code
<!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

Copy Code

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