ActiveReports 14
ActiveReports 14 User Guide / Preview Reports / JavaScript / Previewing Reports in JS Viewer
In This Topic
    Previewing Reports in JS Viewer
    In This Topic

    The JS Viewer when used in MVC and MVC Core applications, allows you to preview all the following file formats:

    If you want to view Code-Based Section reports (.cs or .vb), or RDF files (.rdf) you need to follow a little different approach as elaborated in following sections.

    Note: Previewing Section reports and RDF files is not supported in Core applications.

    To preview Code-Based Section reports in JS Viewer

    To view Code-Based Section reports (file format .cs or .vb), you need to do few modifications in your code provided in Configure JS Viewer topic as follows:

    1. Modify the startup.cs file as:

    Startup.cs
    Copy Code
    public class Startup
        {
            public static string EmbeddedReportsPrefix = "'JSViewerMVCApplication1.Reports";
            public void Configuration(IAppBuilder app)
            {
                app.UseErrorPage();
                app.UseReporting(settings =>
                {
                    settings.UseEmbeddedTemplates(EmbeddedReportsPrefix, Assembly.GetAssembly(GetType()));
                    settings.UseCompression = true;
                    settings.UseCustomStore(GetReport);
                });
                RouteTable.Routes.RouteExistingFiles = true;
            }
            public object GetReport(string reportName = "SectionReport")
            {
                SectionReport1 rpt = new SectionReport1();
                return rpt;
            }
        }
    
    Startup.vb
    Copy Code
    Public Class Startup
        Public Sub Configuration(ByVal app As IAppBuilder)
     
            app.UseReporting(Function(settings)
                                 settings.UseCompression = True
                                 settings.UseCustomStore(AddressOf GetReport)
                                 Return settings
                             End Function)
        
        End Sub
     
        Private Function GetReport() As Object
            Dim rpt As New SectionReport1()
            Return rpt
        End Function
    

     2. Update index.html to include report name in viewer.open() method:

    index.html
    Copy Code
    <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%; overflow-x: hidden">
        <div style="float:right;width:100%" 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',
              reportID: 'JSViewerMVCApplication1.Reports.SectionReport1'    
          });        
        }
      </script>
    </body>
    </html>
    

    To preview RDF files in JS Viewer

    To view RDF files (file format .rdf), you need to do few modifications in your code provided in Configure JS Viewer topic as follows:

    1. Update HomeController.cs to include 'rdf' as valid extension:

    HomeController.cs
    Copy Code
    string[] validExtensions = { ".rdl", ".rdlx", ".rdlx-master", ".rpx", ".rdf" };
    

    HomeController.vb
    Copy Code
    Dim validExtensions = {".rdl", ".rdlx", ".rdlx-master", ".rpx", ".rdf"}
    

     2. Update index.html to include report name in viewer.open() method:

    index.html
    Copy Code
    <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%; overflow-x: hidden">
        <div style="float:right;width:100%" 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'        
          });    
         viewer.openReport("RdfReport.rdf");    
        }
      </script>
    </body>
    </html>
    
    See Also