ActiveReports 18 .NET Edition
Developers / Create Designer and Viewer Applications / Js Viewer Application / Customize Page View
In This Topic
    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>