ActiveReports for .NET 18.0J
Vueアプリケーションの組み込み
ActiveReportsユーザーガイド > レポートの表示 > JSビューワの使用 > Vueアプリケーションの組み込み

このトピックでは、Vueアプリケーション（ASP.NET Core）にJSビューワコンポーネントを組み込む方法について説明します。Vueアアプリケーションサーバーを実行するには、NodeJSが必要です。

  1. Visual Studio 2022を開き、「Vue 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.Viewer.ja

  6. プロジェクトフォルダ内に［resources］フォルダを作成します。［resources］フォルダに、ビューワに表示するレポートを保存できます。
  7. レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。

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

    Program.cs
    コードのコピー 
    using GrapeCity.ActiveReports.Aspnetcore.Viewer;
var builder = WebApplication.CreateBuilder(args);
// コンテナにサービスを追加します。
builder.Services.AddReportViewer();
builder.Services.AddControllers();
var app = builder.Build();
app.UseCors(options => options
    .WithOrigins("http://localhost:5173")
    .AllowAnyHeader()
    .AllowAnyMethod()
    .AllowCredentials()
);
var ResourcesRootDirectory =
    new DirectoryInfo(Path.Combine(Directory.GetCurrentDirectory(), "resources"));
app.UseReportViewer(config => {
    config.UseFileStore(ResourcesRootDirectory);
});
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.MapFallbackToFile("/index.html");
app.Run();

  9. .clientプロジェクトでは、package.jsonファイルを開き、「dependencies」の下に次のパッケージを追加します。

    "@mescius/activereportsnet-viewer-ja": "^18.x.x"

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

    npm install

    ビューワに関するファイルとフォルダは、現在のディレクトリにダウンロードされます。".\node_modules\@mescius\activereportsnet-viewer-ja\dist"
  11. srcフォルダ内のApp.vueファイルを開き、そのコードを次のコードに置き換えます。
    App.vue
    コードのコピー 
    <template>
    <div id="viewer-host">
    </div>
</template>
<script>
    import { createViewer } from '@mescius/activereportsnet-viewer';
    import "@mescius/activereportsnet-viewer/dist/jsViewer.min.css";
    export default {
        name: 'app',
        mounted() {
            let serverUrl = 'http://localhost:5151';
           
            this.viewer = createViewer({
                element: '#viewer-host',
                reportService: {
                    url: serverUrl + '/api/reporting'
                }
            });
            this.viewer.openReport("DemoReport.rdlx");
        }
    }
</script>
<style>
    #viewer-host {
        background-color: #e5e5e5;
        height: 100vh;
        float: right;
        width: 100%;
    }
</style>

  12. 「vite.config.js」ファイルを開き、次のように変更します。

    vite.config.js
    コードのコピー 
    server: {
     proxy: {
         '/api': {
             target: 'http://localhost:5001/' // HTTPを使用するようにターゲットを更新します。           
         }
     },
     port: 5173,
     https: false // HTTPで実行するようにhttpsをfalseに設定します。
 }
  13. ブラウザの起動を無効にするには、.Serverプロジェクト\Properties内のlaunchSettings.jsonでlaunchBrowserをfalseに設定します。
  14. ［ビルド］ > ［ソリューションのビルド］をクリックして、ソリューションをビルドします。F5を押して実行します。

 

 

© MESCIUS inc. All rights reserved.