配置JS Viewer

在MVC和MVC Core应用程序中使用JS Viewer时，您可以预览以下所有文件格式：

.rdl
.rdlx
.rpx
.rdlx-master

如果要查看基于代码的节报告（.cs或.vb）或RDF文件（.rdf），则需要遵循以下各节中介绍的一些不同方法。

注意：Core应用程序不支持预览版块报告和RDF文件。

在JS Viewer中预览基于代码的部分报告
要查看基于代码的部分报告（.cs或.vb文件格式），您需要对“配置JS查看器”主题中提供的代码进行少量修改，如下所示：

1.将startup.cs文件修改为：

Startup.cs

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

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.更新index.html以在viewer.open（）方法中包括报告名称：

index.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%; 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>

在JS Viewer中预览RDF文件

要查看RDF文件（文件格式.rdf），您需要对Configure JS Viewer主题中提供的代码进行少量修改，如下所示：

1.更新HomeController.cs，使其包含“ rdf”作为有效扩展名：

HomeController.cs

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

HomeController.vb

Dim validExtensions = {".rdl", ".rdlx", ".rdlx-master", ".rpx", ".rdf"}

2.更新index.html以在viewer.open（）方法中包括报告名称：

index.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%; 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>

Page tree

配置JS Viewer