JSビューワでレポートの表示

JSビューワをMVCおよびCore MVCアプリケーションで使用する場合、以下のファイル形式をプレビューすることができます。

RDL
RDLX
RPX
RDLX-master

セクションレポート（コードベースのCS、またはVBファイル形式）、またはRDFファイル（レポートドキュメントフォーマット）を表示する方法については、次のセクションを参照してください。

メモ：

Core MVCアプリケーションでは、セクションレポートとRDFファイルをプレビューすることができません。
WebViewerコントロールとJSビューワは、IISのマネージパイプラインモードが統合モードの場合のみサポートされます。クラシックモードで使用する場合は、PlatformNotSupportedException例外が発生します。

JSViewerでセクションレポート（コード）のプレビュー

セクションレポート（コードベースの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.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

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を更新します。

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>JSViewer</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>

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>JSViewer</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>

JSViewerでRDFファイルのプレビュー

RDFファイル（レポートドキュメントフォーマット）を表示するには、「JSビューワの構成」トピックで提供されているコードを次のように修正する必要があります。

1. 有効な拡張子として「rdf」を含めるようにHomeController.csを更新します。

HomeController.cs	コードのコピー
string[] validExtensions = { ".rdl", ".rdlx", ".rdlx-master", ".rpx", ".rdf" };

HomeController.vb	コードのコピー
Dim validExtensions = {".rdl", ".rdlx", ".rdlx-master", ".rpx", ".rdf"}

2. viewer.openReportメソッドにレポート名を含めるようにindex.htmlを更新します。

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>JSViewer</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>

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>JSViewer</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>