ActiveReports for .NET 18.0J
Angularアプリケーションへの組み込み
ActiveReportsユーザーガイド > 概念 > ActiveReports Webデザイナ > Angularアプリケーションへの組み込み

このトピックでは、AngularアプリケーションにWebデザイナコンポーネントを組み込む方法について説明します。Angularアプリケーションサーバーを実行するには、NodeJSとAngularCLIが必要です。Angular CLIをインストールするにはコマンドプロンプトで次のコマンドを入力してインストールします。

npm install -g @angular/cli

  1.  Visual Studio 2022を開き、「Angular and ASP.NET Core」テンプレートを選択して、新しいプロジェクトを追加します。

    Create a New Project Dialog
  2. プロジェクト名を入力し、［次へ］をクリックします。

    Configure your New Project Dialog
  3. フレームワークとして「.NET 8.0（長期的なサポート）」を選択し、他のオプションのチェックボックスを外します。

    Create a New Project Dialog
  4. ［ソリューションエクスプローラー］で、ソリューションを右クリックし、［NuGet パッケージの管理］を選択します。

  5. 次のパッケージをプロジェクトに追加します。

    MESCIUS.ActiveReports.Aspnetcore.Designer.ja

    MESCIUS.ActiveReports.Aspnetcore.Viewer.ja

  6. プロジェクトフォルダ内に［resources］フォルダを作成します。［resources］フォルダに、ビューワに表示するレポートを保存できます。

  7. レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。

  8. Program.csファイルを開き、次のように変更します。

    Program.cs
    コードのコピー 
    using GrapeCity.ActiveReports.Aspnetcore.Designer;
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
using GrapeCity.ActiveReports.Web.Designer;
var builder = WebApplication.CreateBuilder(args);
// コンテナにサービスを追加します。
builder.Services.AddControllers();
builder.Services.AddReportViewer();
builder.Services.AddReportDesigner();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
// HTTP要求パイプラインを構成します。
app.UseHttpsRedirection();
app.UseAuthorization();
var ResourcesRootDirectory =
    new DirectoryInfo(Path.Combine(Directory.GetCurrentDirectory(), "resources"));
app.UseReportDesigner(config => config.UseFileStore(ResourcesRootDirectory, null, FileStoreOptions.NestedFoldersLookup));
app.MapControllers();
app.MapFallbackToFile("/index.html");
app.Run();

  9. .clientプロジェクトでは、package.jsonファイルを開き、「dependencies」の下に次のパッケージを追加します。
    "@mescius/activereportsnet-designer-ja": "^18.x.x",
    "@mescius/activereportsnet-viewer-ja": "^18.x.x"

  10. コマンドプロンプトで「.client」プロジェクトを開き、次のコマンドを実行してnpmパッケージをインストールします。 
    npm install

    ビューワに関するファイルとフォルダは、現在のディレクトリにダウンロードされます。.\node_modules\@mescius\activereportsnet-designer-ja\dist.
  11. .clientプロジェクトのsrc\appフォルダを展開します。app.component.tsファイルを開き、そのコードを次のコードに置き換えて、JSビューワのインスタンスを初期化します。
    app.component.ts
    コードのコピー 
    import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { arWebDesigner } from '@mescius/activereportsnet-designer';
import { JSViewer, createViewer } from '@mescius/activereportsnet-viewer';
import '@mescius/activereportsnet-designer/dist/web-designer.css';
import '@mescius/activereportsnet-viewer/dist/jsViewer.min.css';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  forecasts: any;
  private viewer: JSViewer | null = null;
  constructor(private http: HttpClient) { }
  ngOnInit() {
    arWebDesigner.create('#ar-web-designer', {
      rpx: { enabled: true },
      appBar: { openButton: { visible: true } },
      data: { dataSets: { visible: true, canModify: true }, dataSources: { canModify: true } },
      preview: {
        openViewer: (options: any) => {
          if (this.viewer) {
            this.viewer.openReport(options.documentInfo.id);
            return;
          }
          this.viewer = createViewer({
            element: '#' + options.element,
            reportService: {
              url: 'api/reporting',
            },
            reportID: options.documentInfo.id
          });
        }
      }
    });
  }
  ngOnDestroy() {
    this.viewer?.destroy();
    arWebDesigner.destroy('#ar-web-designer');
  }
  title = 'webdesigner_angular.client';
}

  12. app.component.htmlファイルを開き、その内容を次の内容に置き換えて、要素をホストします。

    app.component.html
    コードのコピー 
    <body>
  <div id="ar-web-designer" class="ar-web-designer">
    <span class="ar-web-designer__loader"><b>AR WebDesigner</b></span>
  </div>
</body>
  13. app.component.cssファイルを開き、内容を次のように変更します。
    app.component.css
    コードのコピー 
    @keyframes arwd-loader {
  from {
    color: #fff
  }
  to {
    color: #205f78
  }
}
.ar-web-designer {
  width: 100%;
  height: 100%
}
.ar-web-designer__loader {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #205f78;
  color: #fff;
  font-size: 18px;
  animation-name: arwd-loader;
  animation-duration: .62s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  justify-content: center;
  align-items: center
}

  14. \src\styles.cssファイルを開き、次のセクションを追加します。

    styles.css
    コードのコピー 
    body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0
}

  15. proxy.conf.jsファイルを開き、コードの「context」セクションを次のように更新します。

    proxy.conf.js
    コードのコピー 
    context: [
      "/weatherforecast",
      "/api"
   ],

  16. ［ビルド］ > ［ソリューションのビルド］をクリックして、ソリューションをビルドします。F5を押して実行します。

 

 

© MESCIUS inc. All rights reserved.