Vueアプリケーションの組み込み

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

Visual Studio 2026を開き、「Vue and ASP.NET Core」テンプレートを選択して、新しいプロジェクトを追加します。
プロジェクト名を入力し、［次へ］をクリックします。
フレームワークとして「.NET 8.0（長期的なサポート）」を選択し、他のオプションのチェックボックスを外します。
［ソリューションエクスプローラー］で、ソリューションを右クリックし、［NuGet パッケージの管理］を選択します。
次のパッケージをプロジェクトに追加します。
MESCIUS.ActiveReports.Aspnetcore.Viewer.ja
プロジェクトフォルダ内に［resources］フォルダを作成します。［resources］フォルダに、ビューワに表示するレポートを保存できます。
レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。

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();

.clientプロジェクトでは、package.jsonファイルを開き、「dependencies」の下に次のパッケージを追加します。
"@mescius/activereportsnet-viewer-ja": "^20.x.x"
コマンドプロンプトで「.client」プロジェクトを開き、次のコマンドを実行してnpmパッケージをインストールします。
npm install
ビューワに関するファイルとフォルダは、現在のディレクトリにダウンロードされます。".\node_modules\@mescius\activereportsnet-viewer-ja\dist"
srcフォルダ内の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>

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

server: {
     proxy: {
         '/api': {
             target: 'http://localhost:5001/' // HTTPを使用するようにターゲットを更新します。           
         }
     },
     port: 5173,
     https: false // HTTPで実行するようにhttpsをfalseに設定します。
 }

ブラウザの起動を無効にするには、.Serverプロジェクト\Properties内のlaunchSettings.jsonでlaunchBrowserをfalseに設定します。
［ビルド］ > ［ソリューションのビルド］をクリックして、ソリューションをビルドします。F5を押して実行します。